From fac763e14c78318bdc8d5cfc2337dfecf1e63869 Mon Sep 17 00:00:00 2001
From: steveseguin <punkrawker@gmail.com>
Date: Sat, 7 Jun 2025 01:14:39 -0400
Subject: [PATCH] revised obs.html -> obs/

---
 obs.html => obs/index.html |  372 +++++----
 obs/locales/de.json        |  312 ++++++++
 obs/locales/en.json        |  312 ++++++++
 obs/locales/es.json        |  312 ++++++++
 obs/locales/fr.json        |  312 ++++++++
 obs/locales/it.json        |  312 ++++++++
 obs/locales/ja.json        |  312 ++++++++
 obs/locales/ko.json        |  312 ++++++++
 obs/locales/nl.json        |  312 ++++++++
 obs/locales/pl.json        |  312 ++++++++
 obs/locales/pt.json        |  312 ++++++++
 obs/locales/ru.json        |  312 ++++++++
 obs/locales/zh-CN.json     |  312 ++++++++
 obs/simple.html            | 1503 ++++++++++++++++++++++++++++++++++++
 14 files changed, 5474 insertions(+), 145 deletions(-)
 rename obs.html => obs/index.html (91%)
 create mode 100644 obs/locales/de.json
 create mode 100644 obs/locales/en.json
 create mode 100644 obs/locales/es.json
 create mode 100644 obs/locales/fr.json
 create mode 100644 obs/locales/it.json
 create mode 100644 obs/locales/ja.json
 create mode 100644 obs/locales/ko.json
 create mode 100644 obs/locales/nl.json
 create mode 100644 obs/locales/pl.json
 create mode 100644 obs/locales/pt.json
 create mode 100644 obs/locales/ru.json
 create mode 100644 obs/locales/zh-CN.json
 create mode 100644 obs/simple.html
diff --git a/obs.html b/obs/index.html
similarity index 91%
rename from obs.html
rename to obs/index.html
index a049830..25ab22e 100644
--- a/obs.html
+++ b/obs/index.html
@@ -3,8 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <script src="https://unpkg.com/i18next/dist/umd/i18next.min.js"></script>
-    <script src="https://unpkg.com/i18next-http-backend/i18nextHttpBackend.js"></script>
+    <!-- Translation system integrated locally - no external dependencies -->
     <title data-i18n="pageTitle">VDO.Ninja OBS Control Dock</title>
     <style>
       body {
@@ -620,7 +619,17 @@
         <label for="languageSelector" data-i18n="languageSwitcher.label">Language:</label>
         <select id="languageSelector">
           <option value="en">English</option>
+          <option value="es">Español</option>
+          <option value="fr">Français</option>
+          <option value="de">Deutsch</option>
+          <option value="it">Italiano</option>
           <option value="pt">Português</option>
+          <option value="ru">Русский</option>
+          <option value="ja">日本語</option>
+          <option value="ko">한국어</option>
+          <option value="zh-CN">简体中文</option>
+          <option value="nl">Nederlands</option>
+          <option value="pl">Polski</option>
         </select>
       </div>
     </div>
@@ -857,8 +866,7 @@
       </div>
     </div>
     <script>
-      // Path to translation files on GitHub
-      const loadPath = 'https://raw.githubusercontent.com/MorseTheCode/OBS-Scripts/refs/heads/main/locales/{{lng}}.json';
+      // Translation files are loaded from local ./locales/ directory
       let logEntries = [];
       const languageSelector = document.getElementById('languageSelector');
       
@@ -883,74 +891,136 @@
       let initialSelectedSourceCreationScenes = [];
 
 
+      // Translation system variables
+      window.translation = {};
+      window.miscTranslations = {};
+      
+      // Get translation with fallback
+      function getTranslation(key, params = null) {
+        if (!window.translation) {
+          // If params is a string, use it as fallback
+          if (typeof params === 'string') return params;
+          return key;
+        }
+        
+        // Handle nested keys like "obsConnection.title"
+        const keys = key.split('.');
+        let value = window.translation;
+        
+        for (const k of keys) {
+          if (value && typeof value === 'object' && k in value) {
+            value = value[k];
+          } else {
+            // If params is a string, use it as fallback
+            if (typeof params === 'string') return params;
+            return key;
+          }
+        }
+        
+        // If no value found
+        if (!value) {
+          if (typeof params === 'string') return params;
+          return key;
+        }
+        
+        // If params is an object, do parameter substitution
+        if (params && typeof params === 'object') {
+          let result = value;
+          Object.keys(params).forEach(param => {
+            result = result.replace(new RegExp(`{{${param}}}`, 'g'), params[param]);
+          });
+          return result;
+        }
+        
+        return value || key;
+      }
+      
       // Function to initialize the application
-      function initializeApp() {
+      async function initializeApp() {
         let savedLanguage = localStorage.getItem('vdoNinjaObsControlLanguage') || 'en';
         languageSelector.value = savedLanguage;
-        i18next
-          .use(i18nextHttpBackend)
-          .init({
-            lng: savedLanguage,
-            fallbackLng: 'en',
-            debug: true,
-            backend: {
-              loadPath: loadPath
-            },
-            ns: ['translation'], 
-            defaultNS: 'translation'
-          }, function(err, t) {
-            if (err) return console.error('Error initializing i18next:', err);
-            loadSettings(); 
-            updateContent();
-            logMessage("VDO.Ninja OBS Control Dock Initialized. Welcome!", "logMessages.appInitialized");
-            updateVdoNinjaButtonState(false);
-            toggleVdoNinjaInputs(false);
-            setupSecureFieldsBlur();
-            startVdoNinjaConnectionMonitor();
-            setupLayoutConfigUI(); 
-          });
+        
+        // Load translations from locales directory
+        try {
+          const response = await fetch(`./locales/${savedLanguage}.json`);
+          if (response.ok) {
+            const localeData = await response.json();
+            window.translation = localeData;
+            window.miscTranslations = localeData;
+          } else {
+            console.error('Failed to load translations, using fallbacks');
+          }
+        } catch (err) {
+          console.error('Error loading translations:', err);
+        }
+        
+        loadSettings();
+        updateContent();
+        logMessage("VDO.Ninja OBS Control Dock Initialized. Welcome!", "logMessages.appInitialized");
+        updateVdoNinjaButtonState(false);
+        toggleVdoNinjaInputs(false);
+        setupSecureFieldsBlur();
+        startVdoNinjaConnectionMonitor();
+        setupLayoutConfigUI();
       }
 
       // Function to update translated content on the page
       function updateContent() {
+        // Update data-i18n elements (compatible with original structure)
         document.querySelectorAll('[data-i18n]').forEach(element => {
           const keyAttr = element.getAttribute('data-i18n');
           const keys = keyAttr.split(';').map(k => k.trim()).filter(k => k);
           keys.forEach(keyInstruction => {
             if (keyInstruction.startsWith('[placeholder]')) {
-              const i18nKey = keyInstruction.substring('[placeholder]'.length);
-              element.placeholder = i18next.t(i18nKey);
+              const translationKey = keyInstruction.substring('[placeholder]'.length);
+              element.placeholder = getTranslation(translationKey);
             } else if (keyInstruction.startsWith('[title]')) {
-              const i18nKey = keyInstruction.substring('[title]'.length);
-              element.title = i18next.t(i18nKey);
+              const translationKey = keyInstruction.substring('[title]'.length);
+              element.title = getTranslation(translationKey);
             } else {
-              element.innerHTML = i18next.t(keyInstruction);
+              element.innerHTML = getTranslation(keyInstruction);
             }
           });
         });
+        
+        // Update data-translate elements (new system)
+        document.querySelectorAll('[data-translate]').forEach(element => {
+          const keyAttr = element.getAttribute('data-translate');
+          const keys = keyAttr.split(';').map(k => k.trim()).filter(k => k);
+          keys.forEach(keyInstruction => {
+            if (keyInstruction.startsWith('[placeholder]')) {
+              element.placeholder = getTranslation(keyInstruction.substring('[placeholder]'.length));
+            } else if (keyInstruction.startsWith('[title]')) {
+              element.title = getTranslation(keyInstruction.substring('[title]'.length));
+            } else {
+              element.innerHTML = getTranslation(keyInstruction);
+            }
+          });
+        });
+        
         document.querySelectorAll('.stream-mapping .mapping-stream-id').forEach(input => {
-            input.placeholder = i18next.t('streamIdMappings.streamIdPlaceholder');
-            input.title = i18next.t('streamIdMappings.streamIdTooltip');
+            input.placeholder = getTranslation('streamIdMappings.streamIdPlaceholder');
+            input.title = getTranslation('streamIdMappings.streamIdTooltip');
         });
         document.querySelectorAll('.stream-mapping .mapping-label').forEach(input => {
-            input.placeholder = i18next.t('streamIdMappings.labelPlaceholder');
-            input.title = i18next.t('streamIdMappings.labelTooltip');
+            input.placeholder = getTranslation('streamIdMappings.labelPlaceholder');
+            input.title = getTranslation('streamIdMappings.labelTooltip');
         });
         document.querySelectorAll('.layout-config-item .layout-scene-select option[value=""]').forEach(opt => {
-            opt.textContent = i18next.t('sceneLayouts.selectSceneOption');
+            opt.textContent = getTranslation('sceneLayouts.selectSceneOption');
         });
          document.querySelectorAll('.layout-config-item .layout-type-select option[value=""]').forEach(opt => {
-            opt.textContent = i18next.t('sceneLayouts.selectLayoutOption');
+            opt.textContent = getTranslation('sceneLayouts.selectLayoutOption');
         });
         // Update dynamically created layout controls
         document.querySelectorAll('.layout-specific-controls [data-i18n-label]').forEach(label => { 
-            if (label.dataset.i18nLabel && i18next.exists(label.dataset.i18nLabel)) {
-                 label.textContent = i18next.t(label.dataset.i18nLabel);
+            if (label.dataset.i18nLabel && window.translation) {
+                 label.textContent = getTranslation(label.dataset.i18nLabel);
             }
         });
          document.querySelectorAll('h3[data-i18n-fallback-header]').forEach(header => { 
-            if (header.dataset.i18nFallbackHeader && i18next.exists(header.dataset.i18nFallbackHeader)) {
-                 header.textContent = i18next.t(header.dataset.i18nFallbackHeader);
+            if (header.dataset.i18nFallbackHeader && window.translation) {
+                 header.textContent = getTranslation(header.dataset.i18nFallbackHeader);
             }
         });
 
@@ -968,19 +1038,29 @@
           document.querySelectorAll(".collapsible").forEach(header => {
               const isCollapsed = header.classList.contains("collapsed");
               const tooltipKey = isCollapsed ? "collapsible.clickToExpand" : "collapsible.clickToCollapse";
-              header.style.setProperty('--before-text', `"${i18next.t(tooltipKey)}"`);
-              header.setAttribute('aria-label', i18next.t(tooltipKey));
+              header.style.setProperty('--before-text', `"${getTranslation(tooltipKey)}"`);
+              header.setAttribute('aria-label', getTranslation(tooltipKey));
           });
       }
 
       // Event listener for language selector
-      languageSelector.addEventListener('change', (event) => {
+      languageSelector.addEventListener('change', async (event) => {
         const newLang = event.target.value;
-        i18next.changeLanguage(newLang, (err, t) => {
-          if (err) return console.error('Error changing language:', err);
-          localStorage.setItem('vdoNinjaObsControlLanguage', newLang);
-          updateContent();
-        });
+        
+        try {
+          const response = await fetch(`./locales/${newLang}.json`);
+          if (response.ok) {
+            const localeData = await response.json();
+            window.translation = localeData;
+            window.miscTranslations = localeData;
+            localStorage.setItem('vdoNinjaObsControlLanguage', newLang);
+            updateContent();
+          } else {
+            console.error('Failed to load language:', newLang);
+          }
+        } catch (err) {
+          console.error('Error changing language:', err);
+        }
       });
 
       // UI Elements
@@ -1103,14 +1183,14 @@
 
       // Render log function
       function renderLog() {
-          if (!logArea || (typeof i18next !== 'undefined' && !i18next.isInitialized)) {
+          if (!logArea || !window.translation) {
              return;
           }
           let logContent = "";
           logEntries.forEach(entry => {
               let translatedMessage = entry.fallbackMessage;
-              if (entry.i18nKey && i18next.exists(entry.i18nKey)) {
-                  translatedMessage = i18next.t(entry.i18nKey, entry.i18nParams);
+              if (entry.i18nKey && getTranslation(entry.i18nKey)) {
+                  translatedMessage = getTranslation(entry.i18nKey, entry.i18nParams);
               } else if (entry.i18nKey) {
                  // console.warn(`i18n key not found: ${entry.i18nKey}`); 
               }
@@ -1170,21 +1250,23 @@
 
       // Update prefix labels
       function updatePrefixLabels() {
-        if (!i18next.isInitialized) return;
+        if (!window.translation) return;
         const cameraPrefixVal = getFullCameraPrefix();
         const reactionSubPrefixVal = reactionSubPrefixInput.value.trim();
         const highlightSubPrefixVal = highlightSubPrefixInput.value.trim();
-        cameraSubPrefixLabelText.textContent = i18next.t("obsConnection.cameraPrefixLabel");
-        reactionSubPrefixLabelText.textContent = i18next.t("obsConnection.reactionPrefixDynamicLabel", {
-            prefix: cameraPrefixVal || "VDO", 
-            separator: (cameraPrefixVal && reactionSubPrefixVal) ? "." : "",
-            subPrefix: reactionSubPrefixVal || ""
-        });
-        highlightSubPrefixLabelText.textContent = i18next.t("obsConnection.highlightPrefixDynamicLabel", {
-            prefix: cameraPrefixVal || "VDO", 
-            separator: (cameraPrefixVal && highlightSubPrefixVal) ? "." : "",
-            subPrefix: highlightSubPrefixVal || ""
-        });
+        cameraSubPrefixLabelText.textContent = getTranslation("obsConnection.cameraPrefixLabel");
+        
+        let reactionText = getTranslation("obsConnection.reactionPrefixDynamicLabel", "Reaction prefix: {{prefix}}{{separator}}{{subPrefix}}");
+        reactionText = reactionText.replace('{{prefix}}', cameraPrefixVal || "VDO")
+                                   .replace('{{separator}}', (cameraPrefixVal && reactionSubPrefixVal) ? "." : "")
+                                   .replace('{{subPrefix}}', reactionSubPrefixVal || "");
+        reactionSubPrefixLabelText.textContent = reactionText;
+        
+        let highlightText = getTranslation("obsConnection.highlightPrefixDynamicLabel", "Highlight prefix: {{prefix}}{{separator}}{{subPrefix}}");
+        highlightText = highlightText.replace('{{prefix}}', cameraPrefixVal || "VDO")
+                                     .replace('{{separator}}', (cameraPrefixVal && highlightSubPrefixVal) ? "." : "")
+                                     .replace('{{subPrefix}}', highlightSubPrefixVal || "");
+        highlightSubPrefixLabelText.textContent = highlightText;
       }
 
       // Event listeners for prefix inputs
@@ -1211,8 +1293,8 @@
 
       // Update OBS connect button text
       function updateObsConnectButtonText() {
-        if (obsConnectBtn && i18next.isInitialized) {
-            obsConnectBtn.textContent = obsConnected ? i18next.t("obsConnection.disconnectButton") : i18next.t("obsConnection.connectButton");
+        if (obsConnectBtn && window.translation) {
+            obsConnectBtn.textContent = obsConnected ? getTranslation("obsConnection.disconnectButton") : getTranslation("obsConnection.connectButton");
         }
       }
 
@@ -1250,19 +1332,19 @@
       // Update VDO.Ninja connect button state
       function updateVdoNinjaButtonState(isVdoConnected) {
         vdoNinjaConnected = isVdoConnected;
-        if (!i18next.isInitialized) return;
+        if (!window.translation) return;
         if (vdoNinjaConnected) {
-          vdoNinjaConnectBtn.textContent = i18next.t("vdoNinjaSettings.disconnectButton");
+          vdoNinjaConnectBtn.textContent = getTranslation("vdoNinjaSettings.disconnectButton");
           vdoNinjaConnectBtn.classList.remove("disconnected");
           vdoNinjaConnectBtn.classList.add("connected");
-          vdoNinjaConnectionStatus.textContent = i18next.t("vdoNinjaSettings.statusConnected");
+          vdoNinjaConnectionStatus.textContent = getTranslation("vdoNinjaSettings.statusConnected");
           vdoNinjaStatusIndicator.classList.add("connected");
           vdoNinjaStatusIndicator.classList.remove("error");
         } else {
-          vdoNinjaConnectBtn.textContent = i18next.t("vdoNinjaSettings.connectButton");
+          vdoNinjaConnectBtn.textContent = getTranslation("vdoNinjaSettings.connectButton");
           vdoNinjaConnectBtn.classList.remove("connected");
           vdoNinjaConnectBtn.classList.add("disconnected");
-          vdoNinjaConnectionStatus.textContent = i18next.t("vdoNinjaSettings.statusDisconnected");
+          vdoNinjaConnectionStatus.textContent = getTranslation("vdoNinjaSettings.statusDisconnected");
           vdoNinjaStatusIndicator.classList.remove("connected", "error");
         }
         toggleVdoNinjaInputs(vdoNinjaConnected);
@@ -1302,7 +1384,7 @@
           autoRemoveSources: autoRemoveSourcesCheckbox.checked,
           screenShareWidth: document.getElementById("screenShareWidth").value,
           screenShareHeight: document.getElementById("screenShareHeight").value,
-          language: i18next.language,
+          language: languageSelector.value || 'en',
           customCSS: customCssInput.value
         };
         localStorage.setItem("obsNinjaSettings", JSON.stringify(settings));
@@ -1340,9 +1422,9 @@
           return;
         }
         initializeVdoNinjaIframe(); 
-        if (i18next.isInitialized) {
-            vdoNinjaConnectionStatus.textContent = i18next.t("vdoNinjaSettings.statusConnecting");
-            vdoNinjaConnectBtn.textContent = i18next.t("vdoNinjaSettings.cancelButton"); 
+        if (window.translation) {
+            vdoNinjaConnectionStatus.textContent = getTranslation("vdoNinjaSettings.statusConnecting");
+            vdoNinjaConnectBtn.textContent = getTranslation("vdoNinjaSettings.cancelButton"); 
         }
         if (vdoNinjaConnectionCheckTimer) {
           clearTimeout(vdoNinjaConnectionCheckTimer);
@@ -1356,9 +1438,9 @@
               "VDO.Ninja connection timed out. No activity received from iframe.",
               "logMessages.vdoNinja.connectionTimeout"
             );
-            if (i18next.isInitialized) {
-                vdoNinjaConnectionStatus.textContent = i18next.t("vdoNinjaSettings.statusConnectionFailed");
-                vdoNinjaConnectBtn.textContent = i18next.t("vdoNinjaSettings.connectButton");
+            if (window.translation) {
+                vdoNinjaConnectionStatus.textContent = getTranslation("vdoNinjaSettings.statusConnectionFailed");
+                vdoNinjaConnectBtn.textContent = getTranslation("vdoNinjaSettings.connectButton");
             }
             vdoNinjaStatusIndicator.classList.add("error");
             toggleVdoNinjaInputs(false); 
@@ -1419,17 +1501,17 @@
               </div>
           `;
         streamMappingsDiv.appendChild(mappingDiv);
-        if (i18next.isInitialized) {
+        if (window.translation) {
             mappingDiv.querySelectorAll('[data-i18n]').forEach(element => {
                 const keyAttr = element.getAttribute('data-i18n');
                 const keys = keyAttr.split(';').map(k => k.trim()).filter(k => k);
                 keys.forEach(keyInstruction => {
                     if (keyInstruction.startsWith('[placeholder]')) {
-                        element.placeholder = i18next.t(keyInstruction.substring('[placeholder]'.length));
+                        element.placeholder = getTranslation(keyInstruction.substring('[placeholder]'.length));
                     } else if (keyInstruction.startsWith('[title]')) {
-                        element.title = i18next.t(keyInstruction.substring('[title]'.length));
+                        element.title = getTranslation(keyInstruction.substring('[title]'.length));
                     } else {
-                        element.innerHTML = i18next.t(keyInstruction);
+                        element.innerHTML = getTranslation(keyInstruction);
                     }
                 });
             });
@@ -1485,13 +1567,13 @@
             if (obsScenes && obsScenes.length > 0) {
               updateSceneDropdowns(); 
             }
-             if (i18next.isInitialized) {
+             if (window.translation) {
                 logMessage(`Loaded ${mappings.length} stream mappings.`, "logMessages.loadedStreamMappings", { count: mappings.length });
             } else {
-                console.log(`Loaded ${mappings.length} stream mappings (i18next not ready for log).`);
+                console.log(`Loaded ${mappings.length} stream mappings.`);
             }
           } catch (e) {
-             if (i18next.isInitialized) {
+             if (window.translation) {
                 logMessage(
                 `Error loading stream mappings from localStorage: ${e.message}.`,
                 "logMessages.errorLoadingStreamMappings", { message: e.message }
@@ -1570,7 +1652,7 @@
 
           const label = document.createElement('label');
           label.htmlFor = `layout-slider-${propertyName}-${configId}`;
-          label.textContent = (i18next.exists(labelKey) ? i18next.t(labelKey) : labelKey) + ":";
+          label.textContent = (getTranslation(labelKey) ? getTranslation(labelKey) : labelKey) + ":";
           label.dataset.i18nLabel = labelKey;
           label.className = 'slider-label';
 
@@ -1663,7 +1745,7 @@
           checkbox.dataset.propertyName = propertyName;
 
           const span = document.createElement('span');
-          span.textContent = i18next.exists(labelKey) ? i18next.t(labelKey) : labelKey;
+          span.textContent = getTranslation(labelKey) ? getTranslation(labelKey) : labelKey;
           span.dataset.i18nLabel = labelKey; 
 
           checkbox.addEventListener('change', () => {
@@ -1725,17 +1807,17 @@
             updateLayoutSpecificControls(configId, config.layoutType, controlsContainer, config);
           }
           
-          if (i18next.isInitialized) {
+          if (window.translation) {
             configDiv.querySelectorAll('[data-i18n]').forEach(element => {
                 const keyAttr = element.getAttribute('data-i18n');
                 const keys = keyAttr.split(';').map(k => k.trim()).filter(k => k);
                 keys.forEach(keyInstruction => {
                     if (keyInstruction.startsWith('[placeholder]')) {
-                        element.placeholder = i18next.t(keyInstruction.substring('[placeholder]'.length));
+                        element.placeholder = getTranslation(keyInstruction.substring('[placeholder]'.length));
                     } else if (keyInstruction.startsWith('[title]')) {
-                        element.title = i18next.t(keyInstruction.substring('[title]'.length));
+                        element.title = getTranslation(keyInstruction.substring('[title]'.length));
                     } else {
-                        element.innerHTML = i18next.t(keyInstruction);
+                        element.innerHTML = getTranslation(keyInstruction);
                     }
                 });
             });
@@ -1763,8 +1845,8 @@
                   logMessage(`Scene '${newSceneName}' is already configured for another layout. Reverting selection.`, "logMessages.sceneAlreadyConfiguredError", {sceneName: newSceneName});
                   const previousValue = sceneLayoutConfigs.find(c => c.id === currentConfigId)?.sceneName || "";
                   event.target.value = previousValue; 
-                  if(i18next.isInitialized) {
-                    alert(i18next.t('sceneLayouts.sceneAlreadyConfiguredAlert', {sceneName: newSceneName}));
+                  if(window.translation) {
+                    alert(getTranslation('sceneLayouts.sceneAlreadyConfiguredAlert', {sceneName: newSceneName}));
                   } else {
                     alert(`Scene '${newSceneName}' is already in use by another layout configuration.`);
                   }
@@ -1802,15 +1884,15 @@
               container.appendChild(createCheckbox(`rh-distribute-${configId}`, 'sceneLayouts.controls.distributeCameras', currentConfig.distributeCameras ?? DEFAULT_REACTION_HIGHLIGHT_DISTRIBUTE_CAMERAS, configId, 'distributeCameras'));
           }
           
-          if (i18next.isInitialized) {
+          if (window.translation) {
             container.querySelectorAll('[data-i18n-label]').forEach(label => {
-                if(label.dataset.i18nLabel && i18next.exists(label.dataset.i18nLabel)) {
-                    label.textContent = i18next.t(label.dataset.i18nLabel) + ":";
+                if(label.dataset.i18nLabel && getTranslation(label.dataset.i18nLabel)) {
+                    label.textContent = getTranslation(label.dataset.i18nLabel) + ":";
                 }
             });
              container.querySelectorAll('.checkbox-label span[data-i18n-label]').forEach(span => {
-                 if(span.dataset.i18nLabel && i18next.exists(span.dataset.i18nLabel)) {
-                    span.textContent = i18next.t(span.dataset.i18nLabel);
+                 if(span.dataset.i18nLabel && getTranslation(span.dataset.i18nLabel)) {
+                    span.textContent = getTranslation(span.dataset.i18nLabel);
                  }
             });
           }
@@ -1942,13 +2024,13 @@
                 customCssInput.value = settings.customCSS;
                 applyCustomCss(settings.customCSS); 
             }
-            if (i18next.isInitialized) {
+            if (window.translation) {
                 logMessage("Settings loaded from localStorage.", "logMessages.settingsLoaded");
             } else {
-                console.log("Settings loaded from localStorage (i18next not ready for log).");
+                console.log("Settings loaded from localStorage.");
             }
           } catch (e) {
-            if (i18next.isInitialized) {
+            if (window.translation) {
                 logMessage(
                 `Error loading settings from localStorage: ${e.message}. Using defaults.`,
                 "logMessages.errorLoadingSettings", { message: e.message }
@@ -1965,7 +2047,7 @@
             initialSelectedSourceCreationScenes = [];
           }
         } else {
-           if (i18next.isInitialized) {
+           if (window.translation) {
                 logMessage("No saved settings found. Using default values.", "logMessages.noSavedSettings");
            } else {
                 console.log("No saved settings found. Using default values.");
@@ -1984,10 +2066,10 @@
 
       // Update active streams list
       function updateStreamList() {
-        if (!i18next.isInitialized) return; 
+        if (!window.translation) return; 
         if (Object.keys(activeStreams).length === 0) {
           streamListContainer.innerHTML =
-            `<div class="stream-item" style="text-align:center; background-color:transparent; border:none; color:#888;">${i18next.t("activeStreams.noActiveStreams")}</div>`;
+            `<div class="stream-item" style="text-align:center; background-color:transparent; border:none; color:#888;">${getTranslation("activeStreams.noActiveStreams")}</div>`;
           return;
         }
         streamListContainer.innerHTML = ""; 
@@ -2016,18 +2098,18 @@
                       <div style="font-weight: 600; font-size: 1.05em; color: #E0E0E0;">${
                         stream.label || streamId
                       }</div>
-                      <small>${i18next.t("activeStreams.streamIdLabel", {id: streamId})}${
-              stream.label ? ` | ${i18next.t("activeStreams.labelLabel", {label: stream.label})}` : ""
+                      <small>${getTranslation("activeStreams.streamIdLabel", {id: streamId})}${
+              stream.label ? ` | ${getTranslation("activeStreams.labelLabel", {label: stream.label})}` : ""
             }</small>
                       <small style="display: block; color: #A0A0B0;">
-                          → ${i18next.t("activeStreams.targetSceneLabelText", {sceneName: targetSceneNameForDisplay || i18next.t("activeStreams.notSet")})}
-                          ${targetSceneNameForDisplay ? `(${i18next.t(targetSceneTagKey)})` : ""}
+                          → ${getTranslation("activeStreams.targetSceneLabelText", {sceneName: targetSceneNameForDisplay || getTranslation("activeStreams.notSet")})}
+                          ${targetSceneNameForDisplay ? `(${getTranslation(targetSceneTagKey)})` : ""}
                       </small>
                       <div style="margin-top: 2px; font-size: 0.9em;">
                         ${
                           stream.sourceCreated
-                            ? `<span style="color:#28A745">${i18next.t("activeStreams.addedToObs")}</span>`
-                            : `<span style="color:#FFC107">${i18next.t("activeStreams.notInObs")}</span>`
+                            ? `<span style="color:#28A745">${getTranslation("activeStreams.addedToObs")}</span>`
+                            : `<span style="color:#FFC107">${getTranslation("activeStreams.notInObs")}</span>`
                         }
                       </div>
                       <div style="margin-top: 8px;" class="flex-row">`; 
@@ -2038,8 +2120,8 @@
                           };">
                               ${
                                 stream.sourceCreated
-                                  ? i18next.t("activeStreams.buttons.removeFromObs")
-                                  : i18next.t("activeStreams.buttons.addToObs")
+                                  ? getTranslation("activeStreams.buttons.removeFromObs")
+                                  : getTranslation("activeStreams.buttons.addToObs")
                               }
                       </button>`;
             if (stream.sourceCreated) { 
@@ -2050,8 +2132,8 @@
                               };">
                                   ${
                                     isHighlighted
-                                      ? i18next.t("activeStreams.buttons.unhighlight")
-                                      : i18next.t("activeStreams.buttons.highlight")
+                                      ? getTranslation("activeStreams.buttons.unhighlight")
+                                      : getTranslation("activeStreams.buttons.highlight")
                                   }
                           </button>`;
             }
@@ -2065,8 +2147,8 @@
                                   };">
                               ${
                                 isCurrentlyScreenSharingThisStream
-                                  ? i18next.t("activeStreams.buttons.stopScreenShare")
-                                  : i18next.t("activeStreams.buttons.screenShare")
+                                  ? getTranslation("activeStreams.buttons.stopScreenShare")
+                                  : getTranslation("activeStreams.buttons.screenShare")
                               }
                           </button>`;
             }
@@ -2442,7 +2524,7 @@
 
       // Update scene dropdowns
       function updateSceneDropdowns() {
-        if (!i18next.isInitialized) return;
+        if (!window.translation) return;
         
         const sourceCreationContainer = document.getElementById("sourceCreationScenesContainer");
         if (sourceCreationContainer) {
@@ -2487,7 +2569,7 @@
             "logMessages.obs.errorCameraPrefixRequired" 
           );
           obsStatusIndicator.classList.add("error");
-          if (i18next.isInitialized) obsConnectionStatus.textContent = i18next.t("obsConnection.statusErrorCameraPrefixMissing"); 
+          if (window.translation) obsConnectionStatus.textContent = getTranslation("obsConnection.statusErrorCameraPrefixMissing"); 
           return;
         }
         let url = obsWsUrlInput.value.trim();
@@ -2495,14 +2577,14 @@
         if (!url) {
           logMessage("Error: OBS WebSocket URL is required.", "logMessages.obs.errorUrlRequired");
           obsStatusIndicator.classList.add("error");
-          if (i18next.isInitialized) obsConnectionStatus.textContent = i18next.t("obsConnection.statusErrorUrlMissing");
+          if (window.translation) obsConnectionStatus.textContent = getTranslation("obsConnection.statusErrorUrlMissing");
           return;
         }
         if (!url.startsWith("ws://") && !url.startsWith("wss://")) {
           url = "ws://" + url; 
           obsWsUrlInput.value = url; 
         }
-        if (i18next.isInitialized) obsConnectionStatus.textContent = i18next.t("obsConnection.statusConnecting");
+        if (window.translation) obsConnectionStatus.textContent = getTranslation("obsConnection.statusConnecting");
         obsStatusIndicator.classList.remove("connected", "error"); 
         logMessage(`Attempting to connect to OBS WebSocket at ${url}...`, "logMessages.obs.attemptingConnection", { url });
         const connectionTimeoutId = setTimeout(() => {
@@ -2518,9 +2600,9 @@
               } catch (e) {} 
               obs = null;
             }
-            if (i18next.isInitialized) {
-                obsConnectionStatus.textContent = i18next.t("obsConnection.statusErrorTimeout");
-                obsConnectBtn.textContent = i18next.t("obsConnection.connectButton");
+            if (window.translation) {
+                obsConnectionStatus.textContent = getTranslation("obsConnection.statusErrorTimeout");
+                obsConnectBtn.textContent = getTranslation("obsConnection.connectButton");
             }
             obsStatusIndicator.classList.add("error");
             obsConnectBtn.classList.remove("connected");
@@ -2582,7 +2664,7 @@
                 updateObsConnectButtonText();
                 obsConnectBtn.classList.add("connected");
                 obsConnectBtn.classList.remove("disconnected");
-                if (i18next.isInitialized) obsConnectionStatus.textContent = i18next.t("obsConnection.statusConnected");
+                if (window.translation) obsConnectionStatus.textContent = getTranslation("obsConnection.statusConnected");
                 obsStatusIndicator.classList.add("connected");
                 obsStatusIndicator.classList.remove("error");
                 onObsConnected(); 
@@ -2674,9 +2756,9 @@
             }
             logMessage(`OBS WebSocket Error: ${errorMsg}`, "logMessages.obs.webSocketError", { error: errorMsg });
             obsStatusIndicator.classList.add("error");
-            if (i18next.isInitialized) {
-                obsConnectionStatus.textContent = i18next.t("obsConnection.statusError");
-                obsConnectBtn.textContent = i18next.t("obsConnection.connectButton");
+            if (window.translation) {
+                obsConnectionStatus.textContent = getTranslation("obsConnection.statusError");
+                obsConnectBtn.textContent = getTranslation("obsConnection.connectButton");
             }
             obsConnectBtn.classList.remove("connected");
             obsConnectBtn.classList.add("disconnected");
@@ -2685,13 +2767,13 @@
           obs.onclose = (event) => {
             clearTimeout(connectionTimeoutId);
             let reason = "";
-            if (i18next.isInitialized) {
+            if (window.translation) {
                 if (event.code === 4009) { 
-                reason = i18next.t("logMessages.obs.authFailedReason"); 
+                reason = getTranslation("logMessages.obs.authFailedReason"); 
                 } else if (event.reason) {
                 reason = event.reason;
                 } else {
-                reason = i18next.t("logMessages.obs.connectionClosedReasonCode", {code: event.code || "Unknown", wasClean: event.wasClean ? "" : i18next.t("logMessages.obs.uncleanDisconnection") });
+                reason = getTranslation("logMessages.obs.connectionClosedReasonCode", {code: event.code || "Unknown", wasClean: event.wasClean ? "" : getTranslation("logMessages.obs.uncleanDisconnection") });
                 }
             } else {
                 reason = `Code ${event.code || 'Unknown'}`; 
@@ -2705,9 +2787,9 @@
             `Error creating OBS WebSocket connection: ${error.message}`,
             "logMessages.obs.errorCreatingConnection", { message: error.message }
           );
-          if (i18next.isInitialized) {
-            obsConnectionStatus.textContent = i18next.t("obsConnection.statusError");
-            obsConnectBtn.textContent = i18next.t("obsConnection.connectButton");
+          if (window.translation) {
+            obsConnectionStatus.textContent = getTranslation("obsConnection.statusError");
+            obsConnectBtn.textContent = getTranslation("obsConnection.connectButton");
           }
           obsStatusIndicator.classList.add("error");
           obsConnectBtn.classList.remove("connected");
@@ -2865,7 +2947,7 @@
         updateObsConnectButtonText();
         obsConnectBtn.classList.remove("connected");
         obsConnectBtn.classList.add("disconnected");
-        if (i18next.isInitialized) obsConnectionStatus.textContent = i18next.t("obsConnection.statusDisconnected");
+        if (window.translation) obsConnectionStatus.textContent = getTranslation("obsConnection.statusDisconnected");
         obsStatusIndicator.classList.remove("connected", "error");
         Object.values(activeStreams).forEach(
           (stream) => (stream.sourceCreated = false)
@@ -2902,12 +2984,12 @@
 
       // Populate scene checkboxes
       function populateSceneCheckboxes(scenesData, containerElement, selectedValues = []) {
-          if (!i18next.isInitialized || !containerElement) return;
+          if (!window.translation || !containerElement) return;
 
           containerElement.innerHTML = ''; 
 
           if (!scenesData || scenesData.length === 0) {
-              const noScenesText = i18next.t("obsTargetSettings.noScenesFound", "Nenhuma cena encontrada");
+              const noScenesText = getTranslation("obsTargetSettings.noScenesFound", "Nenhuma cena encontrada");
               containerElement.innerHTML = `<span data-i18n="obsTargetSettings.noScenesFound">${noScenesText}</span>`;
               return;
           }
@@ -2959,7 +3041,7 @@
         isMultiSelect = false, 
         selectedValues = [] 
       ) {
-        if (!i18next.isInitialized || !selectElement) return; 
+        if (!window.translation || !selectElement) return; 
         
         if (selectElement.id === "sourceCreationScenesContainer") {
             return;
@@ -2971,7 +3053,7 @@
         if (placeholderKey && !isMultiSelect) { 
             const placeholderOption = document.createElement('option');
             placeholderOption.value = ""; 
-            placeholderOption.textContent = i18next.t(placeholderKey);
+            placeholderOption.textContent = getTranslation(placeholderKey);
             selectElement.appendChild(placeholderOption);
         }
 
@@ -3006,13 +3088,13 @@
 
       // Populate scene dropdowns for layout config with disabled options
       function populateSceneDropdownWithOptionsDisabled(scenesData, selectElement, placeholderKey, currentEditingConfigId) {
-          if (!i18next.isInitialized || !selectElement) return;
+          if (!window.translation || !selectElement) return;
           const currentValue = selectElement.value;
           selectElement.innerHTML = '';
 
           const placeholderOption = document.createElement('option');
           placeholderOption.value = "";
-          placeholderOption.textContent = i18next.t(placeholderKey);
+          placeholderOption.textContent = getTranslation(placeholderKey);
           selectElement.appendChild(placeholderOption);
 
           const configuredScenesByOthers = new Set();
@@ -3029,7 +3111,7 @@
                   option.textContent = scene.sceneName;
                   if (configuredScenesByOthers.has(scene.sceneName)) {
                       option.disabled = true;
-                      option.textContent += ` (${i18next.t('sceneLayouts.sceneAlreadyConfiguredTooltip', 'Already in use')})`;
+                      option.textContent += ` (${getTranslation('sceneLayouts.sceneAlreadyConfiguredTooltip', 'Already in use')})`;
                   }
                   selectElement.appendChild(option);
               });
@@ -3169,7 +3251,7 @@
           }
           if (data && data.streamID) {
             const streamId = data.streamID;
-            const label = data.label || (i18next.isInitialized ? i18next.t("vdoNinja.defaultStreamLabel", {id: streamId}) : `Stream ${streamId}`); 
+            const label = data.label || (window.translation ? getTranslation("vdoNinja.defaultStreamLabel", {id: streamId}) : `Stream ${streamId}`); 
             if (
               (data.action === "view-connection" && data.value === true) || 
               data.action === "guest-connected" || 
@@ -3243,7 +3325,7 @@
               "VDO.Ninja connection lost (no activity from iframe). Attempting to reset.",
               "logMessages.vdoNinja.connectionLostResetting"
             );
-            if (i18next.isInitialized) vdoNinjaConnectionStatus.textContent = i18next.t("vdoNinjaSettings.statusConnectionLost");
+            if (window.translation) vdoNinjaConnectionStatus.textContent = getTranslation("vdoNinjaSettings.statusConnectionLost");
             vdoNinjaStatusIndicator.classList.add("error");
             vdoNinjaStatusIndicator.classList.remove("connected");
             disconnectFromVdoNinja(); 
@@ -4065,7 +4147,7 @@
           "logMessages.obs.triggeredRemoval", { id: streamId, baseName: baseSourceName }
         );
         const streamInfo = activeStreams[streamId];
-        const currentLabel = streamInfo ? streamInfo.label : (i18next.isInitialized ? i18next.t("vdoNinja.defaultStreamLabel", {id: streamId}) : `Stream ${streamId}`);
+        const currentLabel = streamInfo ? streamInfo.label : (window.translation ? getTranslation("vdoNinja.defaultStreamLabel", {id: streamId}) : `Stream ${streamId}`);
         const targetInfo = getTargetSceneForStream(streamId, currentLabel);
         if (highlightedStreamId === streamId) {
           logMessage(`Stream ${streamId} was legacy highlighted. Unhighlighting.`, "logMessages.obs.legacyHighlightUnhighlightOnRemove", {id: streamId});
diff --git a/obs/locales/de.json b/obs/locales/de.json
new file mode 100644
index 0000000..54b2c69
--- /dev/null
+++ b/obs/locales/de.json
@@ -0,0 +1,312 @@
+{
+  "pageTitle": "VDO.Ninja OBS Control Dock",
+  "mainHeading": "VDO.Ninja OBS Steuerung",
+  "languageSwitcher": {
+    "label": "Sprache:"
+  },
+  "collapsible": {
+    "clickToExpand": "Klicken zum Erweitern",
+    "clickToCollapse": "Klicken zum Einklappen"
+  },
+  "customCss": {
+    "title": "Benutzerdefiniertes CSS",
+    "label": "Geben Sie hier Ihr benutzerdefiniertes CSS ein:",
+    "description": "Dieses CSS wird auf die Quellen angewendet."
+  },
+  "obsConnection": {
+    "title": "OBS WebSocket-Verbindung",
+    "websocketUrlLabel": "WebSocket-URL:",
+    "passwordLabel": "Passwort:",
+    "cameraPrefixLabel": "Allgemeines Kamera-Präfix:",
+    "reactionPrefixLabel": "Reaktions-Präfix: VDO.",
+    "highlightPrefixLabel": "Hervorhebungs-Präfix: VDO.",
+    "reactionPrefixDynamicLabel": "Reaktions-Präfix: {{prefix}}{{separator}}{{subPrefix}}",
+    "highlightPrefixDynamicLabel": "Hervorhebungs-Präfix: {{prefix}}{{separator}}{{subPrefix}}",
+    "connectButton": "Verbinden",
+    "disconnectButton": "Trennen",
+    "statusDisconnected": "Status: Getrennt",
+    "statusConnected": "Status: Verbunden",
+    "statusConnecting": "Status: Verbinden...",
+    "statusError": "Status: Fehler",
+    "statusErrorUrlMissing": "Status: Fehler - URL fehlt",
+    "statusErrorTimeout": "Status: Fehler - Verbindung hat Zeitüberschreitung",
+    "statusErrorCameraPrefixMissing": "Status: Fehler - Kamera-Präfix fehlt"
+  },
+  "vdoNinjaSettings": {
+    "title": "VDO.Ninja Einstellungen",
+    "baseUrlLabel": "VDO.Ninja Basis-URL:",
+    "baseUrlPlaceholder": "https://vdo.ninja",
+    "roomNameLabel": "Raumname:",
+    "roomNamePlaceholder": "z.B. MeinNinjaRaum",
+    "passwordLabel": "Passwort:",
+    "passwordPlaceholder": "Raum oder &password",
+    "streamIdsLabel": "Stream-IDs:",
+    "streamIdsPlaceholder": "streamId1,streamId2",
+    "roomOrStreamIdsNeeded": "Raumname oder Stream-ID(s) erforderlich",
+    "connectButton": "Verbinden",
+    "disconnectButton": "Trennen",
+    "cancelButton": "Abbrechen",
+    "statusDisconnected": "Status: Getrennt",
+    "statusConnected": "Status: Verbunden",
+    "statusConnecting": "Status: Verbinden...",
+    "statusConnectionFailed": "Status: Verbindung fehlgeschlagen",
+    "statusConnectionLost": "Status: Verbindung verloren"
+  },
+  "streamIdMappings": {
+    "title": "Stream-ID-Zuordnungen",
+    "addNewMappingButton": "Neue Zuordnung hinzufügen",
+    "ruleTitle": "Stream-Zuordnungsregel",
+    "streamIdPlaceholder": "Stream-ID",
+    "streamIdTooltip": "VDO.Ninja Stream-ID",
+    "labelPlaceholder": "Bezeichnung (optional)",
+    "labelTooltip": "VDO.Ninja Stream-Bezeichnung",
+    "matchTypeTooltip": "Wie der Stream zugeordnet wird",
+    "matchType": {
+        "idOnly": "Nur ID",
+        "labelOnly": "Nur Bezeichnung",
+        "bothRequired": "Beides erforderlich",
+        "eitherMatch": "Eines davon"
+    },
+    "targetSceneTooltip": "Ziel-OBS-Szene",
+    "selectSceneOption": "Szene auswählen...",
+    "removeRuleTooltip": "Diese Zuordnungsregel entfernen",
+    "cloneToMainSceneLabel": "In Hauptszene klonen",
+    "switchToSceneOnAddLabel": "Beim Hinzufügen zur Szene wechseln",
+    "ruleDescription": "Definieren Sie, wie eingehende Streams an OBS-Szenen weitergeleitet werden."
+  },
+  "obsTargetSettings": {
+    "title": "OBS Zieleinstellungen",
+    "sourceCreationScenesLabel": "Szenen für Quellenerstellung:",
+    "sourceCreationScenesDesc": "Wählen Sie eine oder mehrere Szenen. Die erste ist die primäre, andere zum Kopieren.",
+    "loadingScenes": "Lade Szenen...",
+    "noScenesFound": "Keine Szenen gefunden",
+    "refetchScenesButton": "Szenen neu laden",
+    "screenShareSettings": {
+        "title": "Bildschirmfreigabe-Einstellungen:",
+        "widthLabel": "Breite:",
+        "heightLabel": "Höhe:",
+        "resolutionNote": "Diese Auflösung wird für Bildschirmfreigabe-Quellen in Szenen mit einem 'Reaktions'-Layout verwendet."
+    },
+    "autoAddSourcesLabel": "Neue Streams automatisch als Quellen hinzufügen",
+    "autoRemoveSourcesLabel": "Quellen bei Trennung automatisch entfernen",
+    "newSourceSizing": {
+        "label": "Standard-Quellengröße:",
+        "defaultSizeOption": "Standard (1920x1080 bei 0,0)",
+        "bestFitOption": "Beste Anpassung (Seitenverhältnis beibehalten)",
+        "stretchToFillOption": "Auf Bildschirm strecken",
+        "overrideNote": "Spezifische Layouts im Abschnitt \"Layouts\" überschreiben diese für diese Szenen."
+    },
+    "codec": {
+        "label": "Codec:",
+        "noneOption": "keiner",
+        "learnMoreTitle": "Mehr über Codec-Optionen erfahren"
+    }
+  },
+  "sceneLayouts": {
+    "title": "Szenen-Layouts",
+    "addNewLayoutButton": "Neues Layout hinzufügen",
+    "description": "Definieren Sie automatische Layouts für bestimmte OBS-Szenen. Diese überschreiben die Standard-Quellengröße für die konfigurierten Szenen.",
+    "sceneLabel": "Szene:",
+    "selectSceneOption": "Szene auswählen...",
+    "layoutLabel": "Layout:",
+    "selectLayoutOption": "Layout auswählen...",
+    "layoutTypes": {
+        "grid": "Raster",
+        "reaction": "Reaktion",
+        "highlight": "Hervorhebung"
+    },
+    "noActiveLayouts": "Keine aktiven Layouts",
+    "removeLayoutTooltip": "Diese Layout-Konfiguration entfernen",
+    "sceneAlreadyConfiguredTooltip": "(Bereits in Verwendung)",
+    "sceneAlreadyConfiguredAlert": "Szene '{{sceneName}}' wird bereits von einer anderen Layout-Konfiguration verwendet.",
+    "controls": {
+        "margin": "Rand",
+        "spacing": "Abstand",
+        "offsetX": "X-Versatz",
+        "offsetY": "Y-Versatz",
+        "gridSplitScreenTwoCameras": "Geteilter Bildschirm für 2 Kameras (Raster)",
+        "distributeCameras": "Kameras verteilen (Reaktion/Hervorhebung)"
+    }
+  },
+  "activeStreams": {
+    "title": "Aktive Streams",
+    "noActiveStreams": "Keine aktiven Streams",
+    "streamIdLabel": "ID: {{id}}",
+    "labelLabel": "Bezeichnung: {{label}}",
+    "targetSceneLabelText": "Zielszene: {{sceneName}}",
+    "notSet": "Nicht festgelegt",
+    "defaultSceneTag": "Standard",
+    "mappedSceneTag": "zugeordnet",
+    "addedToObs": "✓ Zu OBS hinzugefügt",
+    "notInObs": "✗ Nicht in OBS",
+    "buttons": {
+        "addToObs": "Zu OBS hinzufügen",
+        "removeFromObs": "Aus OBS entfernen",
+        "highlight": "Hervorheben",
+        "unhighlight": "Hervorhebung aufheben",
+        "screenShare": "Bildschirm teilen",
+        "stopScreenShare": "Bildschirmfreigabe beenden"
+    }
+  },
+  "log": {
+    "title": "Protokoll"
+  },
+  "vdoNinja": {
+    "defaultStreamLabel": "Stream {{id}}"
+  },
+  "logMessages": {
+    "settingsSaved": "Einstellungen gespeichert.",
+    "settingsLoaded": "Einstellungen aus localStorage geladen.",
+    "customCssChangedWillApplyToSource": "Benutzerdefinierte CSS-Eingabe geändert. Wird bei der nächsten Erstellung/Aktualisierung direkt auf OBS-Quelleneinstellungen angewendet.",
+    "errorLoadingSettings": "Fehler beim Laden der Einstellungen aus localStorage: {{message}}. Verwende Standardwerte.",
+    "noSavedSettings": "Keine gespeicherten Einstellungen gefunden. Verwende Standardwerte.",
+    "appInitialized": "VDO.Ninja OBS Control Dock initialisiert. Willkommen!",
+    "jsShaLoaded": "jsSHA-Bibliothek erfolgreich geladen (Fallback für Web Crypto).",
+    "errorLoadingJsSha": "Fehler: jsSHA-Bibliothek konnte nicht geladen werden. OBS-Authentifizierung könnte fehlschlagen, wenn Web Crypto ebenfalls nicht verfügbar ist.",
+    "loadedStreamMappings": "{{count}} Stream-Zuordnungen geladen.",
+    "errorLoadingStreamMappings": "Fehler beim Laden der Stream-Zuordnungen aus localStorage: {{message}}",
+    "warningStreamMappingElementsNotFound": "Warnung: Konnte nicht alle erwarteten Elemente in einem Stream-Zuordnungs-UI-Div finden.",
+    "loadedLayoutConfigs": "{{count}} Szenen-Layout-Konfigurationen geladen.",
+    "errorLoadingLayoutConfigs": "Fehler beim Laden der Szenen-Layout-Konfigurationen: {{message}}",
+    "savedLayoutConfigs": "{{count}} Szenen-Layout-Konfigurationen gespeichert.",
+    "errorSavingLayoutsDuplicateScene": "Fehler beim Speichern der Layouts: Szene '{{sceneName}}' ist mehrfach konfiguriert. Bitte stellen Sie sicher, dass jede Szene nur ein Layout hat.",
+    "layoutSceneNotFound": "Gespeicherte Szene '{{sceneName}}' für Layout nicht in aktuellen OBS-Szenen gefunden.",
+    "errorHidingSource": "Fehler beim Ausblenden des Quellelements {{sourceName}} in {{sceneName}}: {{message}}",
+    "sceneAlreadyConfiguredError": "Szene '{{sceneName}}' ist bereits für ein anderes Layout konfiguriert. Auswahl wird zurückgesetzt.",
+    "vdoNinja": {
+        "disconnected": "Von VDO.Ninja getrennt.",
+        "alreadyConnected": "Bereits mit VDO.Ninja verbunden.",
+        "errorRoomOrStreamIdNeeded": "VDO.Ninja Fehler: Raumname oder Stream-ID(s) müssen angegeben werden.",
+        "connectionTimeout": "VDO.Ninja Verbindung hat Zeitüberschreitung. Keine Aktivität vom iframe empfangen.",
+        "roomOrStreamIdNeededForConnect": "VDO.Ninja: Raumname oder spezifische Stream-ID(s) müssen zum Verbinden angegeben werden.",
+        "streamIdsEmptyAfterTrim": "VDO.Ninja: Stream-IDs wurden angegeben, waren aber nach dem Trimmen leer.",
+        "initializingIframe": "Initialisiere VDO.Ninja iframe mit URL: {{url}}",
+        "invalidBaseUrl": "Ungültige VDO.Ninja Basis-URL in Einstellungen: {{url}}",
+        "iframeConnectedActive": "VDO.Ninja iframe-Verbindung hergestellt und aktiv.",
+        "streamConnectedActive": "VDO.Ninja Stream verbunden/aktiv: \"{{label}}\" (ID: {{id}})",
+        "autoAddingStream": "Füge Stream {{id}} automatisch zu OBS hinzu.",
+        "streamDisconnectedInactive": "VDO.Ninja Stream getrennt/inaktiv: \"{{label}}\" (ID: {{id}})",
+        "autoRemovingStream": "Entferne Stream {{id}} automatisch aus OBS.",
+        "streamLabelUpdated": "VDO.Ninja Stream-Bezeichnung für ID {{id}} aktualisiert: \"{{newLabel}}\" (war \"{{oldLabel}}\")",
+        "connectionLostResetting": "VDO.Ninja Verbindung verloren (keine Aktivität vom iframe). Versuche zurückzusetzen."
+    },
+    "obs": {
+        "disconnecting": "Trenne von OBS WebSocket...",
+        "errorCameraPrefixRequired": "Fehler: Allgemeines Kamera-Präfix ist für OBS-Verbindung erforderlich.",
+        "errorUrlRequired": "Fehler: OBS WebSocket-URL ist erforderlich.",
+        "attemptingConnection": "Versuche Verbindung zu OBS WebSocket bei {{url}} herzustellen...",
+        "connectionTimeout": "OBS WebSocket-Verbindungsversuch hat Zeitüberschreitung.",
+        "connectionOpenedWaitingHello": "OBS WebSocket-Verbindung geöffnet. Warte auf Server Hello...",
+        "receivedHelloSendingIdentify": "Hello von OBS empfangen. Sende Identify...",
+        "authDataPrepared": "Authentifizierungsdaten für Identify-Nachricht vorbereitet.",
+        "warningAuthRequiredNoPassword": "Warnung: OBS-Server erfordert Authentifizierung, aber kein Passwort angegeben.",
+        "authSuccessConnected": "OBS WebSocket-Authentifizierung erfolgreich! Verbindung hergestellt.",
+        "requestError": "OBS Anfragefehler (Typ: {{type}}, ID: {{id}}): {{error}} (Code: {{code}})",
+        "eventSceneListChanged": "OBS Ereignis: Szenenliste geändert. Lade Szenen neu.",
+        "errorProcessingMessage": "Fehler beim Verarbeiten der OBS WebSocket-Nachricht: {{message}}. Daten: {{data}}",
+        "webSocketError": "OBS WebSocket Fehler: {{error}}",
+        "authFailedReason": "Authentifizierung fehlgeschlagen - falsches Passwort oder Authentifizierung erforderlich und nicht angegeben.",
+        "connectionClosedReasonCode": "Code: {{code}}{{wasClean}}",
+        "uncleanDisconnection": " (Unsaubere Trennung)",
+        "connectionClosed": "OBS WebSocket-Verbindung geschlossen. Grund: {{reason}}",
+        "errorCreatingConnection": "Fehler beim Erstellen der OBS WebSocket-Verbindung: {{message}}",
+        "authGenerationError": "OBS Authentifizierungs-Generierungsfehler: {{message}}",
+        "cannotSendRequestNotConnected": "Kann Anfrage '{{requestType}}' nicht senden: Nicht mit OBS verbunden.",
+        "errorSendingRequest": "Fehler beim Senden der OBS-Anfrage '{{requestType}}': {{message}}",
+        "requestTimeout": "OBS Anfrage '{{requestType}}' (ID: {{id}}) hat Zeitüberschreitung.",
+        "connectionEstablishedFetchingData": "OBS-Verbindung vollständig hergestellt. Lade Anfangsdaten...",
+        "errorPostConnectionSetup": "Fehler beim Post-OBS-Verbindungsaufbau (Laden der Szenen): {{message}}",
+        "connectionClosedOrLost": "OBS-Verbindung wurde geschlossen oder verloren.",
+        "cannotFetchScenesNotConnected": "Kann OBS-Szenen nicht laden: Nicht mit OBS verbunden.",
+        "fetchingScenes": "Lade OBS-Szenen...",
+        "fetchedScenesCount": "{{count}} Szenen von OBS geladen.",
+        "failedToFetchScenes": "Laden der OBS-Szenen fehlgeschlagen oder keine Szenen zurückgegeben.",
+        "errorFetchingScenes": "Fehler beim Laden der OBS-Szenen: {{message}}",
+        "cannotHighlightNotConnected": "Kann nicht hervorheben: Nicht mit OBS verbunden.",
+        "highlightLayoutActiveManualLegacy": "Szene '{{sceneName}}' verwendet das neue Hervorhebungs-Layout. Manuelle Hervorhebungs-Schaltfläche könnte begrenzte Wirkung haben oder wird überschrieben.",
+        "stoppingScreenShareForHighlight": "Eine Bildschirmfreigabe ist aktiv ({{id}}). Beende sie vor der Hervorhebung.",
+        "cannotScreenShareNotConnected": "Kann Bildschirmfreigabe nicht starten: Nicht mit OBS verbunden.",
+        "unhighlightingForScreenShare": "Eine Kamera ist hervorgehoben ({{id}}). Hebe Hervorhebung auf bevor Bildschirmfreigabe gestartet wird.",
+        "cannotAddScreenShareNotConnected": "Kann Bildschirmfreigabe nicht hinzufügen: Nicht mit OBS verbunden.",
+        "cannotAddScreenShareNoRoom": "Kann Bildschirmfreigabe nicht hinzufügen: VDO.Ninja Raumname ist für Bildschirmfreigabe-URLs erforderlich.",
+        "cannotAddScreenShareNoReactionLayoutScene": "Kann Bildschirmfreigabe nicht hinzufügen: Keine Szenen sind mit einem 'Reaktions'-Layout konfiguriert.",
+        "addingUpdatingScreenShareToReactionScenes": "Füge/Aktualisiere Bildschirmfreigabe-Quelle '{{sourceName}}' (URL: {{url}}) zu Reaktions-Szenen hinzu. Primäre Erstellung in '{{primaryScene}}'. ({{count}} Szenen insgesamt)",
+        "reconfiguringExistingScreenShare": "Konfiguriere bestehende Bildschirmfreigabe-Quelle '{{oldName}}' neu zu '{{newName}}'.",
+        "reconfiguredRenamedScreenShare": "Bestehende Bildschirmfreigabe-Quelle neu konfiguriert und umbenannt zu '{{sourceName}}'.",
+        "screenShareExistsUpdating": "Bildschirmfreigabe-Quelle '{{sourceName}}' existiert bereits. Aktualisiere ihre Einstellungen.",
+        "creatingNewScreenShareInScene": "Erstelle neue Bildschirmfreigabe-Quelle '{{sourceName}}' in Szene '{{sceneName}}'.",
+        "ensuredTransformedScreenShareReaction": "Bildschirmfreigabe-Quelle '{{sourceName}}' in Reaktions-Szene '{{sceneName}}' sichergestellt und transformiert.",
+        "sourceFoundInSceneEnabled": "Quelle '{{sourceName}}' in Szene '{{sceneName}}' gefunden, Element-ID: {{itemId}}. Stelle sicher, dass sie aktiviert ist.",
+        "sourceAddedToScene": "Quelle '{{sourceName}}' zu Szene '{{sceneName}}' hinzugefügt, Element-ID: {{itemId}}.",
+        "errorCreatingSceneItem": "Fehler beim Erstellen des Szenenelements für '{{sourceName}}' in '{{sceneName}}': {{message}}",
+        "errorCheckingSceneForItem": "Fehler beim Prüfen auf '{{sourceName}}' in Szene '{{sceneName}}': {{message}}",
+        "errorApplyingInitialTransform": "Fehler beim Anwenden der anfänglichen Standard-Transformation auf '{{sourceName}}' in '{{sceneName}}': {{message}}",
+        "successConfigScreenShare": "Bildschirmfreigabe für Stream {{streamId}} ({{label}}) erfolgreich konfiguriert.",
+        "errorAddingUpdatingScreenShare": "Fehler beim Hinzufügen/Aktualisieren der Bildschirmfreigabe-Quelle '{{sourceName}}': {{message}}.",
+        "cannotToggleHighlightNotConnected": "Kann Hervorhebung nicht umschalten: Nicht mit OBS verbunden.",
+        "streamUnhighlighted": "Stream {{id}} Hervorhebung aufgehoben (umbenannt von {{oldName}} zu {{newName}}).",
+        "streamSuccessfullyUnhighlighted": "Stream {{id}} Hervorhebung erfolgreich aufgehoben (umbenannt zu {{newName}}).",
+        "streamSuccessfullyHighlighted": "Stream {{id}} erfolgreich hervorgehoben (umbenannt zu {{newName}}).",
+        "unhighlightError": "Konnte Hervorhebung nicht aufheben (umbenennen) {{sourceName}}, existiert möglicherweise nicht oder anderer Fehler: {{message}}",
+        "highlightError": "Konnte nicht hervorheben (umbenennen) {{sourceName}}, existiert möglicherweise nicht oder anderer Fehler: {{message}}",
+        "legacyHighlightUnhighlightOnRemove": "Stream {{id}} war legacy hervorgehoben. Hebe Hervorhebung auf.",
+        "cannotAddStreamNotConnected": "Kann Stream \"{{label}}\" ({{id}}) nicht zu OBS hinzufügen: Nicht mit OBS verbunden.",
+        "cannotAddStreamNoTargetSceneName": "Kann Stream \"{{label}}\" ({{id}}) nicht hinzufügen: Ziel-OBS-Szenenname ist erforderlich, aber nicht festgelegt (kein Standard und keine Zuordnung).",
+        "foundExistingStandardSource": "Bestehende Standard-Quelle '{{sourceName}}' für Stream {{streamId}} gefunden.",
+        "foundExistingHighlightForConnectingStream": "Bestehende OBS-Quelle '{{sourceName}}' gefunden, die der Hervorhebungs-Benennung für verbindenden Stream {{streamId}} entspricht. Aktualisiere internen Hervorhebungsstatus.",
+        "foundExistingHighlightedSource": "Bestehende hervorgehobene Quelle '{{sourceName}}' für Stream {{streamId}} gefunden.",
+        "noExistingSourceFoundWillCreate": "Weder Standard- ('{{baseSourceName}}') noch hervorgehobene ('{{highlightedSourceName}}') Quelle für Stream {{streamId}} gefunden. Erstelle neue.",
+        "noExistingStandardSourceSamePrefix": "Standard-Quelle '{{sourceName}}' für Stream {{streamId}} nicht gefunden (Hervorhebungs-Präfix ist gleich). Erstelle neue.",
+        "errorGettingCanvasSize": "Fehler beim Abrufen der OBS-Canvas-Größe: {{message}}. Verwende Standard {{width}}x{{height}}.",
+        "sourceNotGlobalCreating": "Quelle '{{sourceName}}' existiert nicht global. Erstelle sie in Szene '{{sceneName}}'.",
+        "sourceCreatedAddedToScene": "Quelle '{{sourceName}}' erstellt und zu Szene '{{sceneName}}' hinzugefügt.",
+        "sourceGlobalUpdatingWithUrl": "Quelle '{{sourceName}}' existiert bereits global. Aktualisiere ihre Einstellungen. URL: {{url}}",
+        "sourceFoundAsItemInScene": "Quelle '{{sourceName}}' als Element in Szene '{{sceneName}}' gefunden.",
+        "sourceNotInSceneAdding": "Quelle '{{sourceName}}' nicht in Szene '{{sceneName}}'. Füge sie hinzu.",
+        "cloningToMainScene": "Klone Quelle '{{sourceName}}' zur Hauptszene (aus Checkboxen) '{{sceneName}}' aufgrund der Zuordnungsregel.",
+        "addingSourceToOtherScene": "Füge Quelle '{{sourceName}}' als Element zu anderer ausgewählter Szene '{{sceneName}}' hinzu.",
+        "switchingProgramScene": "Wechsle OBS aktuelle Programmszene zu '{{sceneName}}'.",
+        "successfullyProcessedStream": "Stream \"{{label}}\" ({{id}}) erfolgreich verarbeitet, effektive OBS-Quelle: '{{sourceName}}'.",
+        "errorManagingStream": "Fehler beim Verwalten des Streams '{{sourceName}}' (\"{{label}}\") in OBS: {{message}}",
+        "applyTransformAndGridCalled": "applyTransformAndGrid für {{sourceName}} in {{sceneName}} aufgerufen. Löse vollständige Layout-Aktualisierung für Szene aus.",
+        "triggeringLayoutUpdate": "Löse Layout-Aktualisierung für Szene '{{sceneName}}' aus...",
+        "gridFallbackSourceChanged": "Raster-Einstellungen für '{{sourceGridScene}}' (primärer Fallback-Kandidat) geändert. Löse Aktualisierung für Reaktions-/Hervorhebungs-Szene '{{dependentScene}}' aus.",
+        "noSceneItemsForLayout": "Keine Szenenelemente in Szene '{{sceneName}}' für Layout-Aktualisierung gefunden.",
+        "applyingConfiguredLayout": "Wende '{{layoutType}}'-Layout auf Szene '{{sceneName}}' an. ({{count}} Elemente)",
+        "unknownLayoutType": "Unbekannter Layout-Typ '{{layoutType}}' für Szene '{{sceneName}}'. Wende Standard-Größe an.",
+        "noSpecificLayoutApplyingDefault": "Kein spezifisches Layout für Szene '{{sceneName}}'. Wende Standard-Quellengröße an ('{{sizing}}').",
+        "errorTriggeringLayoutUpdate": "Fehler während Layout-Aktualisierung für Szene '{{sceneName}}': {{message}}",
+        "applyingDefaultSizing": "Wende Standard-Quellengröße ('{{sizing}}') auf {{count}} Elemente in Szene '{{sceneName}}' an.",
+        "errorApplyingDefaultTransformItem": "Fehler beim Anwenden der Standard-Transformation auf {{sourceName}} in {{sceneName}}: {{message}}",
+        "noSourcesForGridLayout": "Keine VDO.Ninja Kamera-Quellen für Raster-Layout in Szene '{{sceneName}}'.",
+        "applyingGridLayoutScene": "Wende Raster-Layout auf {{count}} VDO.Ninja Kamera-Quellen in Szene '{{sceneName}}' an.",
+        "applyingGridSplitScreen": "Wende 2-Kamera geteilten Bildschirm Raster-Layout auf Szene '{{sceneName}}' an.",
+        "reactionMainNotFoundFallbackGrid": "Hauptinhalt für Reaktions-Layout in Szene '{{sceneName}}' nicht gefunden/sichtbar. Wende Fallback-Raster von Kameras an.",
+        "highlightMainNotFoundFallbackGrid": "Hauptinhalt für Hervorhebungs-Layout in Szene '{{sceneName}}' nicht gefunden/sichtbar. Wende Fallback-Raster von Kameras an.",
+        "usingGridSceneFallbackSettings": "Verwende Raster-Einstellungen von der ersten konfigurierten 'Raster'-Layout-Szene ('{{sceneName}}') als Fallback für '{{targetScene}}'.",
+        "usingDefaultGridFallbackSettings": "Keine 'Raster'-Layout-Szene gefunden. Verwende Standard-Raster-Einstellungen als Fallback für '{{targetScene}}'.",
+        "applyingFallbackGridToCameras": "Wende Fallback-Raster-Layout auf {{count}} Kamera-Quellen in Szene '{{sceneName}}' an.",
+        "noCamerasForFallbackGridHidingAll": "Keine Kamera-Elemente zum Anzeigen im Fallback-Raster für Szene '{{sceneName}}'. Alle VDO-Quellen in dieser Szene werden ausgeblendet.",
+        "cannotRemoveStreamNotConnected": "Kann Stream {{id}} nicht aus OBS entfernen: Nicht mit OBS verbunden.",
+        "triggeredRemoval": "Benutzer oder automatisch ausgelöste Entfernung von Stream '{{id}}' aus OBS. Basis-Quelle: '{{baseName}}'.",
+        "streamScreenSharingRemoving": "Stream {{id}} hat aktiv Bildschirm geteilt. Starte Entfernung der Bildschirmfreigabe.",
+        "finishedRemovingSourceItems": "Entfernung der Quellelemente für Stream {{id}} aus angegebenen OBS-Szenen abgeschlossen.",
+        "cannotRemoveScreenShareNotConnected": "Kann Bildschirmfreigabe nicht entfernen: Nicht mit OBS verbunden.",
+        "attemptingRemoveScreenShareSource": "Versuche Bildschirmfreigabe-Quelle '{{sourceName}}' vollständig aus OBS zu entfernen (alle Szenen und Eingabe).",
+        "removingGlobalInput": "Entferne globale Eingabe '{{sourceName}}' aus OBS.",
+        "successfullyRemovedInput": "Eingabe '{{sourceName}}' erfolgreich entfernt.",
+        "errorScreenShareRemovalProcess": "Fehler während des Bildschirmfreigabe-Entfernungsprozesses für '{{sourceName}}': {{message}}",
+        "removingSourceItemFromScene": "Entferne Quellelement '{{sourceName}}' (ID: {{itemId}}) aus Szene '{{sceneName}}'.",
+        "errorTryingRemoveSourceItem": "Fehler beim Versuch, Quellelement '{{sourceName}}' aus Szene '{{sceneName}}' zu entfernen: {{message}}",
+        "codecChangedUpdatingSources": "Codec geändert zu: {{codec}}. Aktualisiere OBS-Quellen...",
+        "codecChangedNotConnected": "OBS ist nicht verbunden. Quellen werden nicht mit dem neuen Codec aktualisiert, bis zur Wiederverbindung und einer neuen Aktion.",
+        "sourceUpdatedWithUrlAndCss": "Quelle '{{sourceName}}' aktualisiert mit URL: {{url}} und benutzerdefiniertem CSS.",
+        "screenShareSourceUpdatedWithUrlAndCss": "Bildschirmfreigabe-Quelle '{{sourceName}}' aktualisiert mit URL: {{url}} und benutzerdefiniertem CSS.",
+        "codecUpdateComplete": "Codec-Aktualisierung für OBS-Quellen abgeschlossen.",
+        "codecCssUpdateComplete": "Codec/CSS-Aktualisierung für OBS-Quellen abgeschlossen.",
+        "inputNameChanged": "OBS Ereignis: Eingabename geändert von '{{oldName}}' zu '{{newName}}'. Prüfe relevante Szenen für Layout-Aktualisierungen.",
+        "foundPreExistingHighlight": "Vorhandene hervorgehobene Quelle in OBS gefunden: '{{sourceName}}'. Setze aktive Hervorhebung auf Stream-ID: {{streamId}}.",
+        "errorCheckingMainContentEnabled": "Fehler beim Prüfen, ob Hauptinhalt {{sourceName}} aktiviert ist: {{message}}"
+    }
+  }
+}
\ No newline at end of file
diff --git a/obs/locales/en.json b/obs/locales/en.json
new file mode 100644
index 0000000..eacd6fd
--- /dev/null
+++ b/obs/locales/en.json
@@ -0,0 +1,312 @@
+{
+  "pageTitle": "VDO.Ninja OBS Control Dock",
+  "mainHeading": "VDO.Ninja OBS Control",
+  "languageSwitcher": {
+    "label": "Language:"
+  },
+  "collapsible": {
+    "clickToExpand": "Click to expand",
+    "clickToCollapse": "Click to collapse"
+  },
+  "customCss": {
+    "title": "Custom CSS",
+    "label": "Enter your custom CSS here:",
+    "description": "This CSS will be applied to the sources."
+  },
+  "obsConnection": {
+    "title": "OBS WebSocket Connection",
+    "websocketUrlLabel": "WebSocket URL:",
+    "passwordLabel": "Password:",
+    "cameraPrefixLabel": "General Camera prefix:",
+    "reactionPrefixLabel": "Reaction prefix: VDO.",
+    "highlightPrefixLabel": "Highlight prefix: VDO.",
+    "reactionPrefixDynamicLabel": "Reaction prefix: {{prefix}}{{separator}}{{subPrefix}}",
+    "highlightPrefixDynamicLabel": "Highlight prefix: {{prefix}}{{separator}}{{subPrefix}}",
+    "connectButton": "Connect",
+    "disconnectButton": "Disconnect",
+    "statusDisconnected": "Status: Disconnected",
+    "statusConnected": "Status: Connected",
+    "statusConnecting": "Status: Connecting...",
+    "statusError": "Status: Error",
+    "statusErrorUrlMissing": "Status: Error - URL missing",
+    "statusErrorTimeout": "Status: Error - Connection timed out",
+    "statusErrorCameraPrefixMissing": "Status: Error - Camera Prefix Missing"
+  },
+  "vdoNinjaSettings": {
+    "title": "VDO.Ninja Settings",
+    "baseUrlLabel": "VDO.Ninja Base URL:",
+    "baseUrlPlaceholder": "https://vdo.ninja",
+    "roomNameLabel": "Room Name:",
+    "roomNamePlaceholder": "e.g., MyNinjaRoom",
+    "passwordLabel": "Password:",
+    "passwordPlaceholder": "Room or &password",
+    "streamIdsLabel": "Stream IDs:",
+    "streamIdsPlaceholder": "streamId1,streamId2",
+    "roomOrStreamIdsNeeded": "Room Name or Stream ID(s) needed",
+    "connectButton": "Connect",
+    "disconnectButton": "Disconnect",
+    "cancelButton": "Cancel",
+    "statusDisconnected": "Status: Disconnected",
+    "statusConnected": "Status: Connected",
+    "statusConnecting": "Status: Connecting...",
+    "statusConnectionFailed": "Status: Connection Failed",
+    "statusConnectionLost": "Status: Connection Lost"
+  },
+  "streamIdMappings": {
+    "title": "Stream ID Mappings",
+    "addNewMappingButton": "Add New Mapping",
+    "ruleTitle": "Stream Mapping Rule",
+    "streamIdPlaceholder": "Stream ID",
+    "streamIdTooltip": "VDO.Ninja Stream ID",
+    "labelPlaceholder": "Label (optional)",
+    "labelTooltip": "VDO.Ninja Stream Label",
+    "matchTypeTooltip": "How to match stream",
+    "matchType": {
+        "idOnly": "ID Only",
+        "labelOnly": "Label Only",
+        "bothRequired": "Both Required",
+        "eitherMatch": "Either Match"
+    },
+    "targetSceneTooltip": "Target OBS Scene",
+    "selectSceneOption": "Select a scene...",
+    "removeRuleTooltip": "Remove this mapping rule",
+    "cloneToMainSceneLabel": "Clone to main scene",
+    "switchToSceneOnAddLabel": "Switch to scene on add",
+    "ruleDescription": "Define how incoming streams are routed to OBS scenes."
+  },
+  "obsTargetSettings": {
+    "title": "OBS Target Settings",
+    "sourceCreationScenesLabel": "Scenes for Source Creation:",
+    "sourceCreationScenesDesc": "Select one or more scenes. The first will be the primary, others for copying.",
+    "loadingScenes": "Loading scenes...",
+    "noScenesFound": "No scenes found",
+    "refetchScenesButton": "Re-Fetch Scenes",
+    "screenShareSettings": {
+        "title": "Screen Sharing Settings:",
+        "widthLabel": "Width:",
+        "heightLabel": "Height:",
+        "resolutionNote": "This resolution will be used for screen sharing sources in scenes with a 'Reaction' layout."
+    },
+    "autoAddSourcesLabel": "Auto-add new streams as sources",
+    "autoRemoveSourcesLabel": "Auto-remove sources on disconnect",
+    "newSourceSizing": {
+        "label": "Default Source Sizing:",
+        "defaultSizeOption": "Default (1920x1080 at 0,0)",
+        "bestFitOption": "Best Fit (Preserve Aspect)",
+        "stretchToFillOption": "Stretch to Fill Screen",
+        "overrideNote": "Specific layouts defined in the \"Layouts\" section will override these for those scenes."
+    },
+    "codec": {
+        "label": "Codec:",
+        "noneOption": "none",
+        "learnMoreTitle": "Learn more about codec options"
+    }
+  },
+  "sceneLayouts": {
+    "title": "Scene Layouts",
+    "addNewLayoutButton": "Add New Layout",
+    "description": "Define automatic layouts for specific OBS scenes. These will override the default source sizing for the configured scenes.",
+    "sceneLabel": "Scene:",
+    "selectSceneOption": "Select Scene...",
+    "layoutLabel": "Layout:",
+    "selectLayoutOption": "Select Layout...",
+    "layoutTypes": {
+        "grid": "Grid",
+        "reaction": "Reaction",
+        "highlight": "Highlight"
+    },
+    "noActiveLayouts": "No active layouts",
+    "removeLayoutTooltip": "Remove this layout configuration",
+    "sceneAlreadyConfiguredTooltip": "(Already in use)",
+    "sceneAlreadyConfiguredAlert": "Scene '{{sceneName}}' is already in use by another layout configuration.",
+    "controls": {
+        "margin": "Margin",
+        "spacing": "Spacing",
+        "offsetX": "X Offset",
+        "offsetY": "Y Offset",
+        "gridSplitScreenTwoCameras": "Split screen for 2 cameras (Grid)",
+        "distributeCameras": "Distribute cameras (Reaction/Highlight)"
+    }
+  },
+  "activeStreams": {
+    "title": "Active Streams",
+    "noActiveStreams": "No active streams",
+    "streamIdLabel": "ID: {{id}}",
+    "labelLabel": "Label: {{label}}",
+    "targetSceneLabelText": "Target Scene: {{sceneName}}",
+    "notSet": "Not Set",
+    "defaultSceneTag": "default",
+    "mappedSceneTag": "mapped",
+    "addedToObs": "✓ Added to OBS",
+    "notInObs": "✗ Not in OBS",
+    "buttons": {
+        "addToObs": "Add to OBS",
+        "removeFromObs": "Remove from OBS",
+        "highlight": "Highlight",
+        "unhighlight": "Unhighlight",
+        "screenShare": "Screen Share",
+        "stopScreenShare": "Stop Screen Share"
+    }
+  },
+  "log": {
+    "title": "Log"
+  },
+  "vdoNinja": {
+    "defaultStreamLabel": "Stream {{id}}"
+  },
+  "logMessages": {
+    "settingsSaved": "Settings saved.",
+    "settingsLoaded": "Settings loaded from localStorage.",
+    "customCssChangedWillApplyToSource": "Custom CSS input changed. It will be applied directly to OBS source settings on next creation/update.",
+    "errorLoadingSettings": "Error loading settings from localStorage: {{message}}. Using defaults.",
+    "noSavedSettings": "No saved settings found. Using default values.",
+    "appInitialized": "VDO.Ninja OBS Control Dock Initialized. Welcome!",
+    "jsShaLoaded": "jsSHA library loaded successfully (fallback for Web Crypto).",
+    "errorLoadingJsSha": "Error: Failed to load jsSHA library. OBS authentication might fail if Web Crypto is also unavailable.",
+    "loadedStreamMappings": "Loaded {{count}} stream mappings.",
+    "errorLoadingStreamMappings": "Error loading stream mappings from localStorage: {{message}}",
+    "warningStreamMappingElementsNotFound": "Warning: Could not find all expected elements in a stream mapping UI div.",
+    "loadedLayoutConfigs": "Loaded {{count}} scene layout configurations.",
+    "errorLoadingLayoutConfigs": "Error loading scene layout configurations: {{message}}",
+    "savedLayoutConfigs": "Saved {{count}} scene layout configurations.",
+    "errorSavingLayoutsDuplicateScene": "Error saving layouts: Scene '{{sceneName}}' is configured multiple times. Please ensure each scene has only one layout.",
+    "layoutSceneNotFound": "Saved scene '{{sceneName}}' for layout not found in current OBS scenes.",
+    "errorHidingSource": "Error hiding source item {{sourceName}} in {{sceneName}}: {{message}}",
+    "sceneAlreadyConfiguredError": "Scene '{{sceneName}}' is already configured for another layout. Reverting selection.",
+    "vdoNinja": {
+        "disconnected": "Disconnected from VDO.Ninja.",
+        "alreadyConnected": "Already connected to VDO.Ninja.",
+        "errorRoomOrStreamIdNeeded": "VDO.Ninja Error: Room Name or Stream ID(s) must be provided.",
+        "connectionTimeout": "VDO.Ninja connection timed out. No activity received from iframe.",
+        "roomOrStreamIdNeededForConnect": "VDO.Ninja: Room Name or specific Stream ID(s) must be provided to connect.",
+        "streamIdsEmptyAfterTrim": "VDO.Ninja: Stream IDs provided but were empty after trimming.",
+        "initializingIframe": "Initializing VDO.Ninja iframe with URL: {{url}}",
+        "invalidBaseUrl": "Invalid VDO.Ninja base URL in settings: {{url}}",
+        "iframeConnectedActive": "VDO.Ninja iframe connection established and active.",
+        "streamConnectedActive": "VDO.Ninja stream connected/active: \"{{label}}\" (ID: {{id}})",
+        "autoAddingStream": "Auto-adding stream {{id}} to OBS.",
+        "streamDisconnectedInactive": "VDO.Ninja stream disconnected/inactive: \"{{label}}\" (ID: {{id}})",
+        "autoRemovingStream": "Auto-removing stream {{id}} from OBS.",
+        "streamLabelUpdated": "VDO.Ninja stream label updated for ID {{id}}: \"{{newLabel}}\" (was \"{{oldLabel}}\")",
+        "connectionLostResetting": "VDO.Ninja connection lost (no activity from iframe). Attempting to reset."
+    },
+    "obs": {
+        "disconnecting": "Disconnecting from OBS WebSocket...",
+        "errorCameraPrefixRequired": "Error: General Camera prefix is required for OBS connection.",
+        "errorUrlRequired": "Error: OBS WebSocket URL is required.",
+        "attemptingConnection": "Attempting to connect to OBS WebSocket at {{url}}...",
+        "connectionTimeout": "OBS WebSocket connection attempt timed out.",
+        "connectionOpenedWaitingHello": "OBS WebSocket connection opened. Waiting for Server Hello...",
+        "receivedHelloSendingIdentify": "Received Hello from OBS. Sending Identify...",
+        "authDataPrepared": "Authentication data prepared for Identify message.",
+        "warningAuthRequiredNoPassword": "Warning: OBS server requires authentication, but no password provided.",
+        "authSuccessConnected": "OBS WebSocket Authentication successful! Connection established.",
+        "requestError": "OBS Request Error (Type: {{type}}, ID: {{id}}): {{error}} (Code: {{code}})",
+        "eventSceneListChanged": "OBS Event: Scene list changed. Re-fetching scenes.",
+        "errorProcessingMessage": "Error processing OBS WebSocket message: {{message}}. Data: {{data}}",
+        "webSocketError": "OBS WebSocket Error: {{error}}",
+        "authFailedReason": "Authentication Failed - incorrect password or auth required and not provided.",
+        "connectionClosedReasonCode": "Code: {{code}}{{wasClean}}",
+        "uncleanDisconnection": " (Unclean disconnection)",
+        "connectionClosed": "OBS WebSocket Connection Closed. Reason: {{reason}}",
+        "errorCreatingConnection": "Error creating OBS WebSocket connection: {{message}}",
+        "authGenerationError": "OBS Authentication generation error: {{message}}",
+        "cannotSendRequestNotConnected": "Cannot send request '{{requestType}}': Not connected to OBS.",
+        "errorSendingRequest": "Error sending OBS request '{{requestType}}': {{message}}",
+        "requestTimeout": "OBS Request '{{requestType}}' (ID: {{id}}) timed out.",
+        "connectionEstablishedFetchingData": "OBS Connection fully established. Fetching initial data...",
+        "errorPostConnectionSetup": "Error during post-OBS connection setup (fetching scenes): {{message}}",
+        "connectionClosedOrLost": "OBS Connection has been closed or lost.",
+        "cannotFetchScenesNotConnected": "Cannot fetch OBS scenes: Not connected to OBS.",
+        "fetchingScenes": "Fetching OBS scenes...",
+        "fetchedScenesCount": "Fetched {{count}} scenes from OBS.",
+        "failedToFetchScenes": "Failed to fetch OBS scenes or no scenes returned.",
+        "errorFetchingScenes": "Error fetching OBS scenes: {{message}}",
+        "cannotHighlightNotConnected": "Cannot highlight: Not connected to OBS.",
+        "highlightLayoutActiveManualLegacy": "Scene '{{sceneName}}' uses the new Highlight Layout. Manual highlight button may have limited effect or is superseded.",
+        "stoppingScreenShareForHighlight": "A screen share is active ({{id}}). Stopping it before highlighting.",
+        "cannotScreenShareNotConnected": "Cannot start screen share: Not connected to OBS.",
+        "unhighlightingForScreenShare": "A camera is highlighted ({{id}}). Unhighlighting it before starting screen share.",
+        "cannotAddScreenShareNotConnected": "Cannot add screen share: Not connected to OBS.",
+        "cannotAddScreenShareNoRoom": "Cannot add screen share: VDO.Ninja Room name is required for screen sharing URLs.",
+        "cannotAddScreenShareNoReactionLayoutScene": "Cannot add screen share: No scenes are configured with a 'Reaction' layout.",
+        "addingUpdatingScreenShareToReactionScenes": "Adding/Updating screen share source '{{sourceName}}' (URL: {{url}}) to Reaction scenes. Primary creation in '{{primaryScene}}'. ({{count}} scenes total)",
+        "reconfiguringExistingScreenShare": "Reconfiguring existing screen share source '{{oldName}}' to be '{{newName}}'.",
+        "reconfiguredRenamedScreenShare": "Reconfigured and renamed existing screen share source to '{{sourceName}}'.",
+        "screenShareExistsUpdating": "Screen share source '{{sourceName}}' already exists. Updating its settings.",
+        "creatingNewScreenShareInScene": "Creating new screen share source '{{sourceName}}' in scene '{{sceneName}}'.",
+        "ensuredTransformedScreenShareReaction": "Ensured and transformed screen share source '{{sourceName}}' in Reaction scene '{{sceneName}}'.",
+        "sourceFoundInSceneEnabled": "Source '{{sourceName}}' found in scene '{{sceneName}}', item ID: {{itemId}}. Ensuring it's enabled.",
+        "sourceAddedToScene": "Source '{{sourceName}}' added to scene '{{sceneName}}', item ID: {{itemId}}.",
+        "errorCreatingSceneItem": "Error creating scene item for '{{sourceName}}' in '{{sceneName}}': {{message}}",
+        "errorCheckingSceneForItem": "Error checking for '{{sourceName}}' in scene '{{sceneName}}': {{message}}",
+        "errorApplyingInitialTransform": "Error applying initial default transform to '{{sourceName}}' in '{{sceneName}}': {{message}}",
+        "successConfigScreenShare": "Successfully configured screen share for stream {{streamId}} ({{label}}).",
+        "errorAddingUpdatingScreenShare": "Error adding/updating screen share source '{{sourceName}}': {{message}}.",
+        "cannotToggleHighlightNotConnected": "Cannot toggle highlight: Not connected to OBS.",
+        "streamUnhighlighted": "Stream {{id}} unhighlighted (renamed from {{oldName}} to {{newName}}).",
+        "streamSuccessfullyUnhighlighted": "Stream {{id}} successfully unhighlighted (renamed to {{newName}}).",
+        "streamSuccessfullyHighlighted": "Stream {{id}} successfully highlighted (renamed to {{newName}}).",
+        "unhighlightError": "Could not unhighlight (rename) {{sourceName}}, it might not exist or another error: {{message}}",
+        "highlightError": "Could not highlight (rename) {{sourceName}}, it might not exist or another error: {{message}}",
+        "legacyHighlightUnhighlightOnRemove": "Stream {{id}} was legacy highlighted. Unhighlighting.",
+        "cannotAddStreamNotConnected": "Cannot add stream \"{{label}}\" ({{id}}) to OBS: Not connected to OBS.",
+        "cannotAddStreamNoTargetSceneName": "Cannot add stream \"{{label}}\" ({{id}}): Target OBS scene name is required but not set (no default and no mapping).",
+        "foundExistingStandardSource": "Found existing standard source '{{sourceName}}' for stream {{streamId}}.",
+        "foundExistingHighlightForConnectingStream": "Found existing OBS source '{{sourceName}}' which matches highlight naming for connecting stream {{streamId}}. Updating internal highlight state.",
+        "foundExistingHighlightedSource": "Found existing highlighted source '{{sourceName}}' for stream {{streamId}}.",
+        "noExistingSourceFoundWillCreate": "Neither standard ('{{baseSourceName}}') nor highlighted ('{{highlightedSourceName}}') source found for stream {{streamId}}. Will create new.",
+        "noExistingStandardSourceSamePrefix": "Standard source '{{sourceName}}' not found for stream {{streamId}} (highlight prefix is same). Will create new.",
+        "errorGettingCanvasSize": "Error getting OBS canvas size: {{message}}. Using default {{width}}x{{height}}.",
+        "sourceNotGlobalCreating": "Source '{{sourceName}}' does not exist globally. Creating it in scene '{{sceneName}}'.",
+        "sourceCreatedAddedToScene": "Source '{{sourceName}}' created and added to scene '{{sceneName}}'.",
+        "sourceGlobalUpdatingWithUrl": "Source '{{sourceName}}' already exists globally. Updating its settings. URL: {{url}}",
+        "sourceFoundAsItemInScene": "Source '{{sourceName}}' found as item in scene '{{sceneName}}'.",
+        "sourceNotInSceneAdding": "Source '{{sourceName}}' not in scene '{{sceneName}}'. Adding it.",
+        "cloningToMainScene": "Cloning source '{{sourceName}}' to main scene (from checkboxes) '{{sceneName}}' due to mapping rule.",
+        "addingSourceToOtherScene": "Adding source '{{sourceName}}' as item to other selected scene '{{sceneName}}'.",
+        "switchingProgramScene": "Switching OBS current program scene to '{{sceneName}}'.",
+        "successfullyProcessedStream": "Successfully processed stream \"{{label}}\" ({{id}}), effective OBS source: '{{sourceName}}'.",
+        "errorManagingStream": "Error managing stream '{{sourceName}}' (\"{{label}}\") in OBS: {{message}}",
+        "applyTransformAndGridCalled": "applyTransformAndGrid called for {{sourceName}} in {{sceneName}}. Triggering full layout update for scene.",
+        "triggeringLayoutUpdate": "Triggering layout update for scene '{{sceneName}}'...",
+        "gridFallbackSourceChanged": "Grid settings for '{{sourceGridScene}}' (primary fallback candidate) changed. Triggering update for Reaction/Highlight scene '{{dependentScene}}'.",
+        "noSceneItemsForLayout": "No scene items found in scene '{{sceneName}}' for layout update.",
+        "applyingConfiguredLayout": "Applying '{{layoutType}}' layout to scene '{{sceneName}}'. ({{count}} items)",
+        "unknownLayoutType": "Unknown layout type '{{layoutType}}' for scene '{{sceneName}}'. Applying default sizing.",
+        "noSpecificLayoutApplyingDefault": "No specific layout for scene '{{sceneName}}'. Applying default source sizing ('{{sizing}}').",
+        "errorTriggeringLayoutUpdate": "Error during layout update for scene '{{sceneName}}': {{message}}",
+        "applyingDefaultSizing": "Applying default source sizing ('{{sizing}}') to {{count}} items in scene '{{sceneName}}'.",
+        "errorApplyingDefaultTransformItem": "Error applying default transform to {{sourceName}} in {{sceneName}}: {{message}}",
+        "noSourcesForGridLayout": "No VDO.Ninja camera sources to apply Grid layout in scene '{{sceneName}}'.",
+        "applyingGridLayoutScene": "Applying Grid Layout to {{count}} VDO.Ninja camera sources in scene '{{sceneName}}'.",
+        "applyingGridSplitScreen": "Applying 2-camera split screen grid layout to scene '{{sceneName}}'.",
+        "reactionMainNotFoundFallbackGrid": "Main content for Reaction layout in scene '{{sceneName}}' not found/visible. Applying fallback grid of cameras.",
+        "highlightMainNotFoundFallbackGrid": "Main content for Highlight layout in scene '{{sceneName}}' not found/visible. Applying fallback grid of cameras.",
+        "usingGridSceneFallbackSettings": "Using grid settings from the first configured 'Grid' layout scene ('{{sceneName}}') as fallback for '{{targetScene}}'.",
+        "usingDefaultGridFallbackSettings": "No 'Grid' layout scene found. Using default grid settings as fallback for '{{targetScene}}'.",
+        "applyingFallbackGridToCameras": "Applying fallback Grid layout to {{count}} camera sources in scene '{{sceneName}}'.",
+        "noCamerasForFallbackGridHidingAll": "No camera items to display in fallback grid for scene '{{sceneName}}'. All VDO sources in this scene will be hidden.",
+        "cannotRemoveStreamNotConnected": "Cannot remove stream {{id}} from OBS: Not connected to OBS.",
+        "triggeredRemoval": "User or auto-triggered removal of stream '{{id}}' from OBS. Base source: '{{baseName}}'.",
+        "streamScreenSharingRemoving": "Stream {{id}} was actively screen sharing. Initiating screen share removal.",
+        "finishedRemovingSourceItems": "Finished removing source items for stream {{id}} from specified OBS scenes.",
+        "cannotRemoveScreenShareNotConnected": "Cannot remove screen share: Not connected to OBS.",
+        "attemptingRemoveScreenShareSource": "Attempting to fully remove screen share source '{{sourceName}}' from OBS (all scenes and input).",
+        "removingGlobalInput": "Removing global input '{{sourceName}}' from OBS.",
+        "successfullyRemovedInput": "Successfully removed input '{{sourceName}}'.",
+        "errorScreenShareRemovalProcess": "Error during screen share removal process for '{{sourceName}}': {{message}}",
+        "removingSourceItemFromScene": "Removing source item '{{sourceName}}' (ID: {{itemId}}) from scene '{{sceneName}}'.",
+        "errorTryingRemoveSourceItem": "Error trying to remove source item '{{sourceName}}' from scene '{{sceneName}}': {{message}}",
+        "codecChangedUpdatingSources": "Codec changed to: {{codec}}. Updating OBS sources...",
+        "codecChangedNotConnected": "OBS is not connected. Sources will not be updated with the new codec until reconnection and a new action.",
+        "sourceUpdatedWithUrlAndCss": "Source '{{sourceName}}' updated with URL: {{url}} and custom CSS.",
+        "screenShareSourceUpdatedWithUrlAndCss": "Screen share source '{{sourceName}}' updated with URL: {{url}} and custom CSS.",
+        "codecUpdateComplete": "Codec update for OBS sources complete.",
+        "codecCssUpdateComplete": "Codec/CSS update for OBS sources complete.",
+        "inputNameChanged": "OBS Event: Input name changed from '{{oldName}}' to '{{newName}}'. Checking relevant scenes for layout updates.",
+        "foundPreExistingHighlight": "Found pre-existing highlighted source in OBS: '{{sourceName}}'. Setting active highlight to stream ID: {{streamId}}.",
+        "errorCheckingMainContentEnabled": "Error checking if main content {{sourceName}} is enabled: {{message}}"
+    }
+  }
+}
diff --git a/obs/locales/es.json b/obs/locales/es.json
new file mode 100644
index 0000000..08a1e70
--- /dev/null
+++ b/obs/locales/es.json
@@ -0,0 +1,312 @@
+{
+  "pageTitle": "Panel de Control OBS de VDO.Ninja",
+  "mainHeading": "Control OBS de VDO.Ninja",
+  "languageSwitcher": {
+    "label": "Idioma:"
+  },
+  "collapsible": {
+    "clickToExpand": "Clic para expandir",
+    "clickToCollapse": "Clic para contraer"
+  },
+  "customCss": {
+    "title": "CSS Personalizado",
+    "label": "Introduce tu CSS personalizado aquí:",
+    "description": "Este CSS se aplicará a las fuentes."
+  },
+  "obsConnection": {
+    "title": "Conexión WebSocket de OBS",
+    "websocketUrlLabel": "URL del WebSocket:",
+    "passwordLabel": "Contraseña:",
+    "cameraPrefixLabel": "Prefijo general de cámara:",
+    "reactionPrefixLabel": "Prefijo de reacción: VDO.",
+    "highlightPrefixLabel": "Prefijo de resaltado: VDO.",
+    "reactionPrefixDynamicLabel": "Prefijo de reacción: {{prefix}}{{separator}}{{subPrefix}}",
+    "highlightPrefixDynamicLabel": "Prefijo de resaltado: {{prefix}}{{separator}}{{subPrefix}}",
+    "connectButton": "Conectar",
+    "disconnectButton": "Desconectar",
+    "statusDisconnected": "Estado: Desconectado",
+    "statusConnected": "Estado: Conectado",
+    "statusConnecting": "Estado: Conectando...",
+    "statusError": "Estado: Error",
+    "statusErrorUrlMissing": "Estado: Error - Falta la URL",
+    "statusErrorTimeout": "Estado: Error - Se agotó el tiempo de conexión",
+    "statusErrorCameraPrefixMissing": "Estado: Error - Falta el prefijo de cámara"
+  },
+  "vdoNinjaSettings": {
+    "title": "Configuración de VDO.Ninja",
+    "baseUrlLabel": "URL Base de VDO.Ninja:",
+    "baseUrlPlaceholder": "https://vdo.ninja",
+    "roomNameLabel": "Nombre de la Sala:",
+    "roomNamePlaceholder": "ej., MiSalaNinja",
+    "passwordLabel": "Contraseña:",
+    "passwordPlaceholder": "Sala o &password",
+    "streamIdsLabel": "IDs de Stream:",
+    "streamIdsPlaceholder": "streamId1,streamId2",
+    "roomOrStreamIdsNeeded": "Se necesita nombre de sala o ID(s) de stream",
+    "connectButton": "Conectar",
+    "disconnectButton": "Desconectar",
+    "cancelButton": "Cancelar",
+    "statusDisconnected": "Estado: Desconectado",
+    "statusConnected": "Estado: Conectado",
+    "statusConnecting": "Estado: Conectando...",
+    "statusConnectionFailed": "Estado: Conexión fallida",
+    "statusConnectionLost": "Estado: Conexión perdida"
+  },
+  "streamIdMappings": {
+    "title": "Mapeos de ID de Stream",
+    "addNewMappingButton": "Agregar Nuevo Mapeo",
+    "ruleTitle": "Regla de Mapeo de Stream",
+    "streamIdPlaceholder": "ID de Stream",
+    "streamIdTooltip": "ID de Stream de VDO.Ninja",
+    "labelPlaceholder": "Etiqueta (opcional)",
+    "labelTooltip": "Etiqueta de Stream de VDO.Ninja",
+    "matchTypeTooltip": "Cómo hacer coincidir el stream",
+    "matchType": {
+        "idOnly": "Solo ID",
+        "labelOnly": "Solo Etiqueta",
+        "bothRequired": "Ambos requeridos",
+        "eitherMatch": "Cualquiera coincide"
+    },
+    "targetSceneTooltip": "Escena OBS de destino",
+    "selectSceneOption": "Selecciona una escena...",
+    "removeRuleTooltip": "Eliminar esta regla de mapeo",
+    "cloneToMainSceneLabel": "Clonar a la escena principal",
+    "switchToSceneOnAddLabel": "Cambiar a escena al agregar",
+    "ruleDescription": "Define cómo se enrutan los streams entrantes a las escenas de OBS."
+  },
+  "obsTargetSettings": {
+    "title": "Configuración de Destino OBS",
+    "sourceCreationScenesLabel": "Escenas para Creación de Fuentes:",
+    "sourceCreationScenesDesc": "Selecciona una o más escenas. La primera será la principal, las demás para copiar.",
+    "loadingScenes": "Cargando escenas...",
+    "noScenesFound": "No se encontraron escenas",
+    "refetchScenesButton": "Recargar Escenas",
+    "screenShareSettings": {
+        "title": "Configuración de Compartir Pantalla:",
+        "widthLabel": "Ancho:",
+        "heightLabel": "Alto:",
+        "resolutionNote": "Esta resolución se usará para las fuentes de compartir pantalla en escenas con diseño 'Reacción'."
+    },
+    "autoAddSourcesLabel": "Auto-agregar nuevos streams como fuentes",
+    "autoRemoveSourcesLabel": "Auto-eliminar fuentes al desconectar",
+    "newSourceSizing": {
+        "label": "Tamaño de Fuente Predeterminado:",
+        "defaultSizeOption": "Predeterminado (1920x1080 en 0,0)",
+        "bestFitOption": "Mejor Ajuste (Preservar Aspecto)",
+        "stretchToFillOption": "Estirar para Llenar Pantalla",
+        "overrideNote": "Los diseños específicos definidos en la sección \"Diseños\" anularán estos para esas escenas."
+    },
+    "codec": {
+        "label": "Códec:",
+        "noneOption": "ninguno",
+        "learnMoreTitle": "Más información sobre las opciones de códec"
+    }
+  },
+  "sceneLayouts": {
+    "title": "Diseños de Escena",
+    "addNewLayoutButton": "Agregar Nuevo Diseño",
+    "description": "Define diseños automáticos para escenas específicas de OBS. Estos anularán el tamaño de fuente predeterminado para las escenas configuradas.",
+    "sceneLabel": "Escena:",
+    "selectSceneOption": "Seleccionar Escena...",
+    "layoutLabel": "Diseño:",
+    "selectLayoutOption": "Seleccionar Diseño...",
+    "layoutTypes": {
+        "grid": "Cuadrícula",
+        "reaction": "Reacción",
+        "highlight": "Resaltado"
+    },
+    "noActiveLayouts": "No hay diseños activos",
+    "removeLayoutTooltip": "Eliminar esta configuración de diseño",
+    "sceneAlreadyConfiguredTooltip": "(Ya en uso)",
+    "sceneAlreadyConfiguredAlert": "La escena '{{sceneName}}' ya está en uso por otra configuración de diseño.",
+    "controls": {
+        "margin": "Margen",
+        "spacing": "Espaciado",
+        "offsetX": "Desplazamiento X",
+        "offsetY": "Desplazamiento Y",
+        "gridSplitScreenTwoCameras": "Pantalla dividida para 2 cámaras (Cuadrícula)",
+        "distributeCameras": "Distribuir cámaras (Reacción/Resaltado)"
+    }
+  },
+  "activeStreams": {
+    "title": "Streams Activos",
+    "noActiveStreams": "No hay streams activos",
+    "streamIdLabel": "ID: {{id}}",
+    "labelLabel": "Etiqueta: {{label}}",
+    "targetSceneLabelText": "Escena de Destino: {{sceneName}}",
+    "notSet": "No establecido",
+    "defaultSceneTag": "predeterminado",
+    "mappedSceneTag": "mapeado",
+    "addedToObs": "✓ Agregado a OBS",
+    "notInObs": "✗ No en OBS",
+    "buttons": {
+        "addToObs": "Agregar a OBS",
+        "removeFromObs": "Eliminar de OBS",
+        "highlight": "Resaltar",
+        "unhighlight": "Quitar resaltado",
+        "screenShare": "Compartir Pantalla",
+        "stopScreenShare": "Detener Compartir Pantalla"
+    }
+  },
+  "log": {
+    "title": "Registro"
+  },
+  "vdoNinja": {
+    "defaultStreamLabel": "Stream {{id}}"
+  },
+  "logMessages": {
+    "settingsSaved": "Configuración guardada.",
+    "settingsLoaded": "Configuración cargada desde localStorage.",
+    "customCssChangedWillApplyToSource": "CSS personalizado cambiado. Se aplicará directamente a la configuración de fuente OBS en la próxima creación/actualización.",
+    "errorLoadingSettings": "Error al cargar configuración desde localStorage: {{message}}. Usando valores predeterminados.",
+    "noSavedSettings": "No se encontraron configuraciones guardadas. Usando valores predeterminados.",
+    "appInitialized": "Panel de Control OBS de VDO.Ninja Inicializado. ¡Bienvenido!",
+    "jsShaLoaded": "Biblioteca jsSHA cargada exitosamente (respaldo para Web Crypto).",
+    "errorLoadingJsSha": "Error: Fallo al cargar la biblioteca jsSHA. La autenticación OBS podría fallar si Web Crypto tampoco está disponible.",
+    "loadedStreamMappings": "Se cargaron {{count}} mapeos de stream.",
+    "errorLoadingStreamMappings": "Error al cargar mapeos de stream desde localStorage: {{message}}",
+    "warningStreamMappingElementsNotFound": "Advertencia: No se pudieron encontrar todos los elementos esperados en un div UI de mapeo de stream.",
+    "loadedLayoutConfigs": "Se cargaron {{count}} configuraciones de diseño de escena.",
+    "errorLoadingLayoutConfigs": "Error al cargar configuraciones de diseño de escena: {{message}}",
+    "savedLayoutConfigs": "Se guardaron {{count}} configuraciones de diseño de escena.",
+    "errorSavingLayoutsDuplicateScene": "Error al guardar diseños: La escena '{{sceneName}}' está configurada varias veces. Por favor asegúrate de que cada escena tenga solo un diseño.",
+    "layoutSceneNotFound": "La escena guardada '{{sceneName}}' para el diseño no se encontró en las escenas OBS actuales.",
+    "errorHidingSource": "Error al ocultar elemento de fuente {{sourceName}} en {{sceneName}}: {{message}}",
+    "sceneAlreadyConfiguredError": "La escena '{{sceneName}}' ya está configurada para otro diseño. Revirtiendo selección.",
+    "vdoNinja": {
+        "disconnected": "Desconectado de VDO.Ninja.",
+        "alreadyConnected": "Ya conectado a VDO.Ninja.",
+        "errorRoomOrStreamIdNeeded": "Error VDO.Ninja: Se debe proporcionar el nombre de la sala o ID(s) de stream.",
+        "connectionTimeout": "Se agotó el tiempo de conexión VDO.Ninja. No se recibió actividad del iframe.",
+        "roomOrStreamIdNeededForConnect": "VDO.Ninja: Se debe proporcionar el nombre de la sala o ID(s) de stream específicos para conectar.",
+        "streamIdsEmptyAfterTrim": "VDO.Ninja: Se proporcionaron IDs de stream pero estaban vacíos después de recortar.",
+        "initializingIframe": "Inicializando iframe de VDO.Ninja con URL: {{url}}",
+        "invalidBaseUrl": "URL base de VDO.Ninja inválida en configuración: {{url}}",
+        "iframeConnectedActive": "Conexión de iframe VDO.Ninja establecida y activa.",
+        "streamConnectedActive": "Stream VDO.Ninja conectado/activo: \"{{label}}\" (ID: {{id}})",
+        "autoAddingStream": "Auto-agregando stream {{id}} a OBS.",
+        "streamDisconnectedInactive": "Stream VDO.Ninja desconectado/inactivo: \"{{label}}\" (ID: {{id}})",
+        "autoRemovingStream": "Auto-eliminando stream {{id}} de OBS.",
+        "streamLabelUpdated": "Etiqueta de stream VDO.Ninja actualizada para ID {{id}}: \"{{newLabel}}\" (era \"{{oldLabel}}\")",
+        "connectionLostResetting": "Conexión VDO.Ninja perdida (sin actividad del iframe). Intentando reiniciar."
+    },
+    "obs": {
+        "disconnecting": "Desconectando del WebSocket de OBS...",
+        "errorCameraPrefixRequired": "Error: El prefijo general de cámara es requerido para la conexión OBS.",
+        "errorUrlRequired": "Error: La URL del WebSocket de OBS es requerida.",
+        "attemptingConnection": "Intentando conectar al WebSocket de OBS en {{url}}...",
+        "connectionTimeout": "El intento de conexión del WebSocket de OBS se agotó.",
+        "connectionOpenedWaitingHello": "Conexión WebSocket de OBS abierta. Esperando Server Hello...",
+        "receivedHelloSendingIdentify": "Hello recibido de OBS. Enviando Identify...",
+        "authDataPrepared": "Datos de autenticación preparados para mensaje Identify.",
+        "warningAuthRequiredNoPassword": "Advertencia: El servidor OBS requiere autenticación, pero no se proporcionó contraseña.",
+        "authSuccessConnected": "¡Autenticación WebSocket de OBS exitosa! Conexión establecida.",
+        "requestError": "Error de Solicitud OBS (Tipo: {{type}}, ID: {{id}}): {{error}} (Código: {{code}})",
+        "eventSceneListChanged": "Evento OBS: Lista de escenas cambiada. Recargando escenas.",
+        "errorProcessingMessage": "Error procesando mensaje WebSocket de OBS: {{message}}. Datos: {{data}}",
+        "webSocketError": "Error WebSocket de OBS: {{error}}",
+        "authFailedReason": "Autenticación fallida - contraseña incorrecta o autenticación requerida y no proporcionada.",
+        "connectionClosedReasonCode": "Código: {{code}}{{wasClean}}",
+        "uncleanDisconnection": " (Desconexión no limpia)",
+        "connectionClosed": "Conexión WebSocket de OBS cerrada. Razón: {{reason}}",
+        "errorCreatingConnection": "Error creando conexión WebSocket de OBS: {{message}}",
+        "authGenerationError": "Error de generación de autenticación OBS: {{message}}",
+        "cannotSendRequestNotConnected": "No se puede enviar solicitud '{{requestType}}': No conectado a OBS.",
+        "errorSendingRequest": "Error enviando solicitud OBS '{{requestType}}': {{message}}",
+        "requestTimeout": "Solicitud OBS '{{requestType}}' (ID: {{id}}) se agotó el tiempo.",
+        "connectionEstablishedFetchingData": "Conexión OBS completamente establecida. Obteniendo datos iniciales...",
+        "errorPostConnectionSetup": "Error durante la configuración post-conexión OBS (obteniendo escenas): {{message}}",
+        "connectionClosedOrLost": "La conexión OBS ha sido cerrada o perdida.",
+        "cannotFetchScenesNotConnected": "No se pueden obtener escenas OBS: No conectado a OBS.",
+        "fetchingScenes": "Obteniendo escenas OBS...",
+        "fetchedScenesCount": "Se obtuvieron {{count}} escenas de OBS.",
+        "failedToFetchScenes": "Fallo al obtener escenas OBS o no se devolvieron escenas.",
+        "errorFetchingScenes": "Error obteniendo escenas OBS: {{message}}",
+        "cannotHighlightNotConnected": "No se puede resaltar: No conectado a OBS.",
+        "highlightLayoutActiveManualLegacy": "La escena '{{sceneName}}' usa el nuevo Diseño de Resaltado. El botón de resaltado manual puede tener efecto limitado o estar reemplazado.",
+        "stoppingScreenShareForHighlight": "Una compartición de pantalla está activa ({{id}}). Deteniéndola antes de resaltar.",
+        "cannotScreenShareNotConnected": "No se puede iniciar compartir pantalla: No conectado a OBS.",
+        "unhighlightingForScreenShare": "Una cámara está resaltada ({{id}}). Quitando resaltado antes de iniciar compartir pantalla.",
+        "cannotAddScreenShareNotConnected": "No se puede agregar compartir pantalla: No conectado a OBS.",
+        "cannotAddScreenShareNoRoom": "No se puede agregar compartir pantalla: Se requiere el nombre de sala VDO.Ninja para URLs de compartir pantalla.",
+        "cannotAddScreenShareNoReactionLayoutScene": "No se puede agregar compartir pantalla: No hay escenas configuradas con diseño 'Reacción'.",
+        "addingUpdatingScreenShareToReactionScenes": "Agregando/Actualizando fuente de compartir pantalla '{{sourceName}}' (URL: {{url}}) a escenas de Reacción. Creación principal en '{{primaryScene}}'. ({{count}} escenas en total)",
+        "reconfiguringExistingScreenShare": "Reconfigurando fuente de compartir pantalla existente '{{oldName}}' para ser '{{newName}}'.",
+        "reconfiguredRenamedScreenShare": "Reconfigurada y renombrada fuente de compartir pantalla existente a '{{sourceName}}'.",
+        "screenShareExistsUpdating": "La fuente de compartir pantalla '{{sourceName}}' ya existe. Actualizando su configuración.",
+        "creatingNewScreenShareInScene": "Creando nueva fuente de compartir pantalla '{{sourceName}}' en escena '{{sceneName}}'.",
+        "ensuredTransformedScreenShareReaction": "Asegurada y transformada fuente de compartir pantalla '{{sourceName}}' en escena de Reacción '{{sceneName}}'.",
+        "sourceFoundInSceneEnabled": "Fuente '{{sourceName}}' encontrada en escena '{{sceneName}}', ID de elemento: {{itemId}}. Asegurando que esté habilitada.",
+        "sourceAddedToScene": "Fuente '{{sourceName}}' agregada a escena '{{sceneName}}', ID de elemento: {{itemId}}.",
+        "errorCreatingSceneItem": "Error creando elemento de escena para '{{sourceName}}' en '{{sceneName}}': {{message}}",
+        "errorCheckingSceneForItem": "Error verificando '{{sourceName}}' en escena '{{sceneName}}': {{message}}",
+        "errorApplyingInitialTransform": "Error aplicando transformación predeterminada inicial a '{{sourceName}}' en '{{sceneName}}': {{message}}",
+        "successConfigScreenShare": "Compartir pantalla configurado exitosamente para stream {{streamId}} ({{label}}).",
+        "errorAddingUpdatingScreenShare": "Error agregando/actualizando fuente de compartir pantalla '{{sourceName}}': {{message}}.",
+        "cannotToggleHighlightNotConnected": "No se puede alternar resaltado: No conectado a OBS.",
+        "streamUnhighlighted": "Stream {{id}} sin resaltar (renombrado de {{oldName}} a {{newName}}).",
+        "streamSuccessfullyUnhighlighted": "Stream {{id}} exitosamente sin resaltar (renombrado a {{newName}}).",
+        "streamSuccessfullyHighlighted": "Stream {{id}} exitosamente resaltado (renombrado a {{newName}}).",
+        "unhighlightError": "No se pudo quitar resaltado (renombrar) {{sourceName}}, puede que no exista u otro error: {{message}}",
+        "highlightError": "No se pudo resaltar (renombrar) {{sourceName}}, puede que no exista u otro error: {{message}}",
+        "legacyHighlightUnhighlightOnRemove": "Stream {{id}} estaba resaltado de forma heredada. Quitando resaltado.",
+        "cannotAddStreamNotConnected": "No se puede agregar stream \"{{label}}\" ({{id}}) a OBS: No conectado a OBS.",
+        "cannotAddStreamNoTargetSceneName": "No se puede agregar stream \"{{label}}\" ({{id}}): Se requiere el nombre de escena OBS de destino pero no está establecido (sin predeterminado y sin mapeo).",
+        "foundExistingStandardSource": "Se encontró fuente estándar existente '{{sourceName}}' para stream {{streamId}}.",
+        "foundExistingHighlightForConnectingStream": "Se encontró fuente OBS existente '{{sourceName}}' que coincide con el nombre de resaltado para stream conectándose {{streamId}}. Actualizando estado de resaltado interno.",
+        "foundExistingHighlightedSource": "Se encontró fuente resaltada existente '{{sourceName}}' para stream {{streamId}}.",
+        "noExistingSourceFoundWillCreate": "No se encontró fuente estándar ('{{baseSourceName}}') ni resaltada ('{{highlightedSourceName}}') para stream {{streamId}}. Se creará nueva.",
+        "noExistingStandardSourceSamePrefix": "Fuente estándar '{{sourceName}}' no encontrada para stream {{streamId}} (prefijo de resaltado es igual). Se creará nueva.",
+        "errorGettingCanvasSize": "Error obteniendo tamaño de lienzo OBS: {{message}}. Usando predeterminado {{width}}x{{height}}.",
+        "sourceNotGlobalCreating": "La fuente '{{sourceName}}' no existe globalmente. Creándola en escena '{{sceneName}}'.",
+        "sourceCreatedAddedToScene": "Fuente '{{sourceName}}' creada y agregada a escena '{{sceneName}}'.",
+        "sourceGlobalUpdatingWithUrl": "La fuente '{{sourceName}}' ya existe globalmente. Actualizando su configuración. URL: {{url}}",
+        "sourceFoundAsItemInScene": "Fuente '{{sourceName}}' encontrada como elemento en escena '{{sceneName}}'.",
+        "sourceNotInSceneAdding": "Fuente '{{sourceName}}' no está en escena '{{sceneName}}'. Agregándola.",
+        "cloningToMainScene": "Clonando fuente '{{sourceName}}' a escena principal (desde casillas) '{{sceneName}}' debido a regla de mapeo.",
+        "addingSourceToOtherScene": "Agregando fuente '{{sourceName}}' como elemento a otra escena seleccionada '{{sceneName}}'.",
+        "switchingProgramScene": "Cambiando escena de programa actual OBS a '{{sceneName}}'.",
+        "successfullyProcessedStream": "Stream procesado exitosamente \"{{label}}\" ({{id}}), fuente OBS efectiva: '{{sourceName}}'.",
+        "errorManagingStream": "Error gestionando stream '{{sourceName}}' (\"{{label}}\") en OBS: {{message}}",
+        "applyTransformAndGridCalled": "applyTransformAndGrid llamado para {{sourceName}} en {{sceneName}}. Activando actualización completa de diseño para escena.",
+        "triggeringLayoutUpdate": "Activando actualización de diseño para escena '{{sceneName}}'...",
+        "gridFallbackSourceChanged": "Configuración de cuadrícula para '{{sourceGridScene}}' (candidato de respaldo principal) cambió. Activando actualización para escena Reacción/Resaltado '{{dependentScene}}'.",
+        "noSceneItemsForLayout": "No se encontraron elementos de escena en escena '{{sceneName}}' para actualización de diseño.",
+        "applyingConfiguredLayout": "Aplicando diseño '{{layoutType}}' a escena '{{sceneName}}'. ({{count}} elementos)",
+        "unknownLayoutType": "Tipo de diseño desconocido '{{layoutType}}' para escena '{{sceneName}}'. Aplicando tamaño predeterminado.",
+        "noSpecificLayoutApplyingDefault": "Sin diseño específico para escena '{{sceneName}}'. Aplicando tamaño de fuente predeterminado ('{{sizing}}').",
+        "errorTriggeringLayoutUpdate": "Error durante actualización de diseño para escena '{{sceneName}}': {{message}}",
+        "applyingDefaultSizing": "Aplicando tamaño de fuente predeterminado ('{{sizing}}') a {{count}} elementos en escena '{{sceneName}}'.",
+        "errorApplyingDefaultTransformItem": "Error aplicando transformación predeterminada a {{sourceName}} en {{sceneName}}: {{message}}",
+        "noSourcesForGridLayout": "No hay fuentes de cámara VDO.Ninja para aplicar diseño de Cuadrícula en escena '{{sceneName}}'.",
+        "applyingGridLayoutScene": "Aplicando Diseño de Cuadrícula a {{count}} fuentes de cámara VDO.Ninja en escena '{{sceneName}}'.",
+        "applyingGridSplitScreen": "Aplicando diseño de cuadrícula de pantalla dividida para 2 cámaras a escena '{{sceneName}}'.",
+        "reactionMainNotFoundFallbackGrid": "Contenido principal para diseño de Reacción en escena '{{sceneName}}' no encontrado/visible. Aplicando cuadrícula de respaldo de cámaras.",
+        "highlightMainNotFoundFallbackGrid": "Contenido principal para diseño de Resaltado en escena '{{sceneName}}' no encontrado/visible. Aplicando cuadrícula de respaldo de cámaras.",
+        "usingGridSceneFallbackSettings": "Usando configuración de cuadrícula de la primera escena con diseño 'Cuadrícula' configurada ('{{sceneName}}') como respaldo para '{{targetScene}}'.",
+        "usingDefaultGridFallbackSettings": "No se encontró escena con diseño 'Cuadrícula'. Usando configuración de cuadrícula predeterminada como respaldo para '{{targetScene}}'.",
+        "applyingFallbackGridToCameras": "Aplicando diseño de Cuadrícula de respaldo a {{count}} fuentes de cámara en escena '{{sceneName}}'.",
+        "noCamerasForFallbackGridHidingAll": "No hay elementos de cámara para mostrar en cuadrícula de respaldo para escena '{{sceneName}}'. Todas las fuentes VDO en esta escena serán ocultadas.",
+        "cannotRemoveStreamNotConnected": "No se puede eliminar stream {{id}} de OBS: No conectado a OBS.",
+        "triggeredRemoval": "Eliminación activada por usuario o auto para stream '{{id}}' de OBS. Fuente base: '{{baseName}}'.",
+        "streamScreenSharingRemoving": "Stream {{id}} estaba compartiendo pantalla activamente. Iniciando eliminación de compartir pantalla.",
+        "finishedRemovingSourceItems": "Terminada la eliminación de elementos de fuente para stream {{id}} de las escenas OBS especificadas.",
+        "cannotRemoveScreenShareNotConnected": "No se puede eliminar compartir pantalla: No conectado a OBS.",
+        "attemptingRemoveScreenShareSource": "Intentando eliminar completamente fuente de compartir pantalla '{{sourceName}}' de OBS (todas las escenas y entrada).",
+        "removingGlobalInput": "Eliminando entrada global '{{sourceName}}' de OBS.",
+        "successfullyRemovedInput": "Entrada '{{sourceName}}' eliminada exitosamente.",
+        "errorScreenShareRemovalProcess": "Error durante proceso de eliminación de compartir pantalla para '{{sourceName}}': {{message}}",
+        "removingSourceItemFromScene": "Eliminando elemento de fuente '{{sourceName}}' (ID: {{itemId}}) de escena '{{sceneName}}'.",
+        "errorTryingRemoveSourceItem": "Error intentando eliminar elemento de fuente '{{sourceName}}' de escena '{{sceneName}}': {{message}}",
+        "codecChangedUpdatingSources": "Códec cambiado a: {{codec}}. Actualizando fuentes OBS...",
+        "codecChangedNotConnected": "OBS no está conectado. Las fuentes no se actualizarán con el nuevo códec hasta la reconexión y una nueva acción.",
+        "sourceUpdatedWithUrlAndCss": "Fuente '{{sourceName}}' actualizada con URL: {{url}} y CSS personalizado.",
+        "screenShareSourceUpdatedWithUrlAndCss": "Fuente de compartir pantalla '{{sourceName}}' actualizada con URL: {{url}} y CSS personalizado.",
+        "codecUpdateComplete": "Actualización de códec para fuentes OBS completada.",
+        "codecCssUpdateComplete": "Actualización de códec/CSS para fuentes OBS completada.",
+        "inputNameChanged": "Evento OBS: Nombre de entrada cambió de '{{oldName}}' a '{{newName}}'. Verificando escenas relevantes para actualizaciones de diseño.",
+        "foundPreExistingHighlight": "Se encontró fuente resaltada preexistente en OBS: '{{sourceName}}'. Estableciendo resaltado activo a ID de stream: {{streamId}}.",
+        "errorCheckingMainContentEnabled": "Error verificando si el contenido principal {{sourceName}} está habilitado: {{message}}"
+    }
+  }
+}
\ No newline at end of file
diff --git a/obs/locales/fr.json b/obs/locales/fr.json
new file mode 100644
index 0000000..32dce27
--- /dev/null
+++ b/obs/locales/fr.json
@@ -0,0 +1,312 @@
+{
+  "pageTitle": "VDO.Ninja Panneau de Contrôle OBS",
+  "mainHeading": "Contrôle VDO.Ninja OBS",
+  "languageSwitcher": {
+    "label": "Langue :"
+  },
+  "collapsible": {
+    "clickToExpand": "Cliquez pour développer",
+    "clickToCollapse": "Cliquez pour réduire"
+  },
+  "customCss": {
+    "title": "CSS Personnalisé",
+    "label": "Entrez votre CSS personnalisé ici :",
+    "description": "Ce CSS sera appliqué aux sources."
+  },
+  "obsConnection": {
+    "title": "Connexion WebSocket OBS",
+    "websocketUrlLabel": "URL WebSocket :",
+    "passwordLabel": "Mot de passe :",
+    "cameraPrefixLabel": "Préfixe général des caméras :",
+    "reactionPrefixLabel": "Préfixe Réaction : VDO.",
+    "highlightPrefixLabel": "Préfixe Surbrillance : VDO.",
+    "reactionPrefixDynamicLabel": "Préfixe Réaction : {{prefix}}{{separator}}{{subPrefix}}",
+    "highlightPrefixDynamicLabel": "Préfixe Surbrillance : {{prefix}}{{separator}}{{subPrefix}}",
+    "connectButton": "Se connecter",
+    "disconnectButton": "Se déconnecter",
+    "statusDisconnected": "Statut : Déconnecté",
+    "statusConnected": "Statut : Connecté",
+    "statusConnecting": "Statut : Connexion en cours...",
+    "statusError": "Statut : Erreur",
+    "statusErrorUrlMissing": "Statut : Erreur - URL manquante",
+    "statusErrorTimeout": "Statut : Erreur - Délai de connexion dépassé",
+    "statusErrorCameraPrefixMissing": "Statut : Erreur - Préfixe de caméra manquant"
+  },
+  "vdoNinjaSettings": {
+    "title": "Paramètres VDO.Ninja",
+    "baseUrlLabel": "URL de base VDO.Ninja :",
+    "baseUrlPlaceholder": "https://vdo.ninja",
+    "roomNameLabel": "Nom de la salle :",
+    "roomNamePlaceholder": "p.ex., MaSalleNinja",
+    "passwordLabel": "Mot de passe :",
+    "passwordPlaceholder": "Salle ou &password",
+    "streamIdsLabel": "IDs de flux :",
+    "streamIdsPlaceholder": "idFlux1,idFlux2",
+    "roomOrStreamIdsNeeded": "Nom de salle ou ID(s) de flux requis",
+    "connectButton": "Se connecter",
+    "disconnectButton": "Se déconnecter",
+    "cancelButton": "Annuler",
+    "statusDisconnected": "Statut : Déconnecté",
+    "statusConnected": "Statut : Connecté",
+    "statusConnecting": "Statut : Connexion en cours...",
+    "statusConnectionFailed": "Statut : Échec de connexion",
+    "statusConnectionLost": "Statut : Connexion perdue"
+  },
+  "streamIdMappings": {
+    "title": "Correspondances des ID de flux",
+    "addNewMappingButton": "Ajouter une nouvelle correspondance",
+    "ruleTitle": "Règle de correspondance de flux",
+    "streamIdPlaceholder": "ID de flux",
+    "streamIdTooltip": "ID de flux VDO.Ninja",
+    "labelPlaceholder": "Étiquette (optionnel)",
+    "labelTooltip": "Étiquette de flux VDO.Ninja",
+    "matchTypeTooltip": "Comment faire correspondre le flux",
+    "matchType": {
+        "idOnly": "ID uniquement",
+        "labelOnly": "Étiquette uniquement",
+        "bothRequired": "Les deux requis",
+        "eitherMatch": "L'un ou l'autre"
+    },
+    "targetSceneTooltip": "Scène OBS cible",
+    "selectSceneOption": "Sélectionnez une scène...",
+    "removeRuleTooltip": "Supprimer cette règle de correspondance",
+    "cloneToMainSceneLabel": "Cloner vers la scène principale",
+    "switchToSceneOnAddLabel": "Basculer vers la scène lors de l'ajout",
+    "ruleDescription": "Définir comment les flux entrants sont acheminés vers les scènes OBS."
+  },
+  "obsTargetSettings": {
+    "title": "Paramètres de cible OBS",
+    "sourceCreationScenesLabel": "Scènes pour la création de sources :",
+    "sourceCreationScenesDesc": "Sélectionnez une ou plusieurs scènes. La première sera la principale, les autres pour la copie.",
+    "loadingScenes": "Chargement des scènes...",
+    "noScenesFound": "Aucune scène trouvée",
+    "refetchScenesButton": "Recharger les scènes",
+    "screenShareSettings": {
+        "title": "Paramètres de partage d'écran :",
+        "widthLabel": "Largeur :",
+        "heightLabel": "Hauteur :",
+        "resolutionNote": "Cette résolution sera utilisée pour les sources de partage d'écran dans les scènes avec une disposition 'Réaction'."
+    },
+    "autoAddSourcesLabel": "Ajouter automatiquement les nouveaux flux comme sources",
+    "autoRemoveSourcesLabel": "Supprimer automatiquement les sources lors de la déconnexion",
+    "newSourceSizing": {
+        "label": "Dimensionnement par défaut des sources :",
+        "defaultSizeOption": "Par défaut (1920x1080 à 0,0)",
+        "bestFitOption": "Meilleur ajustement (Conserver le ratio)",
+        "stretchToFillOption": "Étirer pour remplir l'écran",
+        "overrideNote": "Les dispositions spécifiques définies dans la section \"Dispositions\" remplaceront celles-ci pour ces scènes."
+    },
+    "codec": {
+        "label": "Codec :",
+        "noneOption": "aucun",
+        "learnMoreTitle": "En savoir plus sur les options de codec"
+    }
+  },
+  "sceneLayouts": {
+    "title": "Dispositions de scène",
+    "addNewLayoutButton": "Ajouter une nouvelle disposition",
+    "description": "Définir des dispositions automatiques pour des scènes OBS spécifiques. Celles-ci remplaceront le dimensionnement par défaut des sources pour les scènes configurées.",
+    "sceneLabel": "Scène :",
+    "selectSceneOption": "Sélectionner une scène...",
+    "layoutLabel": "Disposition :",
+    "selectLayoutOption": "Sélectionner une disposition...",
+    "layoutTypes": {
+        "grid": "Grille",
+        "reaction": "Réaction",
+        "highlight": "Surbrillance"
+    },
+    "noActiveLayouts": "Aucune disposition active",
+    "removeLayoutTooltip": "Supprimer cette configuration de disposition",
+    "sceneAlreadyConfiguredTooltip": "(Déjà utilisée)",
+    "sceneAlreadyConfiguredAlert": "La scène '{{sceneName}}' est déjà utilisée par une autre configuration de disposition.",
+    "controls": {
+        "margin": "Marge",
+        "spacing": "Espacement",
+        "offsetX": "Décalage X",
+        "offsetY": "Décalage Y",
+        "gridSplitScreenTwoCameras": "Écran partagé pour 2 caméras (Grille)",
+        "distributeCameras": "Distribuer les caméras (Réaction/Surbrillance)"
+    }
+  },
+  "activeStreams": {
+    "title": "Flux actifs",
+    "noActiveStreams": "Aucun flux actif",
+    "streamIdLabel": "ID : {{id}}",
+    "labelLabel": "Étiquette : {{label}}",
+    "targetSceneLabelText": "Scène cible : {{sceneName}}",
+    "notSet": "Non défini",
+    "defaultSceneTag": "par défaut",
+    "mappedSceneTag": "associé",
+    "addedToObs": "✓ Ajouté à OBS",
+    "notInObs": "✗ Pas dans OBS",
+    "buttons": {
+        "addToObs": "Ajouter à OBS",
+        "removeFromObs": "Retirer d'OBS",
+        "highlight": "Surligner",
+        "unhighlight": "Retirer la surbrillance",
+        "screenShare": "Partage d'écran",
+        "stopScreenShare": "Arrêter le partage"
+    }
+  },
+  "log": {
+    "title": "Journal"
+  },
+  "vdoNinja": {
+    "defaultStreamLabel": "Flux {{id}}"
+  },
+  "logMessages": {
+    "settingsSaved": "Paramètres enregistrés.",
+    "settingsLoaded": "Paramètres chargés depuis localStorage.",
+    "customCssChangedWillApplyToSource": "CSS personnalisé modifié. Il sera appliqué directement aux paramètres de source OBS lors de la prochaine création/mise à jour.",
+    "errorLoadingSettings": "Erreur lors du chargement des paramètres depuis localStorage : {{message}}. Utilisation des valeurs par défaut.",
+    "noSavedSettings": "Aucun paramètre enregistré trouvé. Utilisation des valeurs par défaut.",
+    "appInitialized": "Panneau de Contrôle VDO.Ninja OBS initialisé. Bienvenue !",
+    "jsShaLoaded": "Bibliothèque jsSHA chargée avec succès (solution de secours pour Web Crypto).",
+    "errorLoadingJsSha": "Erreur : Échec du chargement de la bibliothèque jsSHA. L'authentification OBS pourrait échouer si Web Crypto est également indisponible.",
+    "loadedStreamMappings": "{{count}} correspondances de flux chargées.",
+    "errorLoadingStreamMappings": "Erreur lors du chargement des correspondances de flux depuis localStorage : {{message}}",
+    "warningStreamMappingElementsNotFound": "Avertissement : Impossible de trouver tous les éléments attendus dans une interface de correspondance de flux.",
+    "loadedLayoutConfigs": "{{count}} configurations de disposition de scène chargées.",
+    "errorLoadingLayoutConfigs": "Erreur lors du chargement des configurations de disposition de scène : {{message}}",
+    "savedLayoutConfigs": "{{count}} configurations de disposition de scène enregistrées.",
+    "errorSavingLayoutsDuplicateScene": "Erreur lors de l'enregistrement des dispositions : La scène '{{sceneName}}' est configurée plusieurs fois. Assurez-vous que chaque scène n'a qu'une seule disposition.",
+    "layoutSceneNotFound": "La scène enregistrée '{{sceneName}}' pour la disposition n'a pas été trouvée dans les scènes OBS actuelles.",
+    "errorHidingSource": "Erreur lors du masquage de l'élément source {{sourceName}} dans {{sceneName}} : {{message}}",
+    "sceneAlreadyConfiguredError": "La scène '{{sceneName}}' est déjà configurée pour une autre disposition. Annulation de la sélection.",
+    "vdoNinja": {
+        "disconnected": "Déconnecté de VDO.Ninja.",
+        "alreadyConnected": "Déjà connecté à VDO.Ninja.",
+        "errorRoomOrStreamIdNeeded": "Erreur VDO.Ninja : Le nom de salle ou le(s) ID(s) de flux doivent être fournis.",
+        "connectionTimeout": "Délai de connexion VDO.Ninja dépassé. Aucune activité reçue de l'iframe.",
+        "roomOrStreamIdNeededForConnect": "VDO.Ninja : Le nom de salle ou le(s) ID(s) de flux spécifiques doivent être fournis pour se connecter.",
+        "streamIdsEmptyAfterTrim": "VDO.Ninja : Les IDs de flux fournis étaient vides après suppression des espaces.",
+        "initializingIframe": "Initialisation de l'iframe VDO.Ninja avec l'URL : {{url}}",
+        "invalidBaseUrl": "URL de base VDO.Ninja invalide dans les paramètres : {{url}}",
+        "iframeConnectedActive": "Connexion iframe VDO.Ninja établie et active.",
+        "streamConnectedActive": "Flux VDO.Ninja connecté/actif : \"{{label}}\" (ID : {{id}})",
+        "autoAddingStream": "Ajout automatique du flux {{id}} à OBS.",
+        "streamDisconnectedInactive": "Flux VDO.Ninja déconnecté/inactif : \"{{label}}\" (ID : {{id}})",
+        "autoRemovingStream": "Suppression automatique du flux {{id}} d'OBS.",
+        "streamLabelUpdated": "Étiquette de flux VDO.Ninja mise à jour pour l'ID {{id}} : \"{{newLabel}}\" (était \"{{oldLabel}}\")",
+        "connectionLostResetting": "Connexion VDO.Ninja perdue (aucune activité de l'iframe). Tentative de réinitialisation."
+    },
+    "obs": {
+        "disconnecting": "Déconnexion du WebSocket OBS...",
+        "errorCameraPrefixRequired": "Erreur : Le préfixe général de caméra est requis pour la connexion OBS.",
+        "errorUrlRequired": "Erreur : L'URL WebSocket OBS est requise.",
+        "attemptingConnection": "Tentative de connexion au WebSocket OBS à {{url}}...",
+        "connectionTimeout": "Délai de tentative de connexion WebSocket OBS dépassé.",
+        "connectionOpenedWaitingHello": "Connexion WebSocket OBS ouverte. En attente du Hello du serveur...",
+        "receivedHelloSendingIdentify": "Hello reçu d'OBS. Envoi de l'Identify...",
+        "authDataPrepared": "Données d'authentification préparées pour le message Identify.",
+        "warningAuthRequiredNoPassword": "Avertissement : Le serveur OBS nécessite une authentification, mais aucun mot de passe n'a été fourni.",
+        "authSuccessConnected": "Authentification WebSocket OBS réussie ! Connexion établie.",
+        "requestError": "Erreur de requête OBS (Type : {{type}}, ID : {{id}}) : {{error}} (Code : {{code}})",
+        "eventSceneListChanged": "Événement OBS : La liste des scènes a changé. Rechargement des scènes.",
+        "errorProcessingMessage": "Erreur lors du traitement du message WebSocket OBS : {{message}}. Données : {{data}}",
+        "webSocketError": "Erreur WebSocket OBS : {{error}}",
+        "authFailedReason": "Échec de l'authentification - mot de passe incorrect ou authentification requise et non fournie.",
+        "connectionClosedReasonCode": "Code : {{code}}{{wasClean}}",
+        "uncleanDisconnection": " (Déconnexion non propre)",
+        "connectionClosed": "Connexion WebSocket OBS fermée. Raison : {{reason}}",
+        "errorCreatingConnection": "Erreur lors de la création de la connexion WebSocket OBS : {{message}}",
+        "authGenerationError": "Erreur de génération d'authentification OBS : {{message}}",
+        "cannotSendRequestNotConnected": "Impossible d'envoyer la requête '{{requestType}}' : Non connecté à OBS.",
+        "errorSendingRequest": "Erreur lors de l'envoi de la requête OBS '{{requestType}}' : {{message}}",
+        "requestTimeout": "Délai dépassé pour la requête OBS '{{requestType}}' (ID : {{id}}).",
+        "connectionEstablishedFetchingData": "Connexion OBS entièrement établie. Récupération des données initiales...",
+        "errorPostConnectionSetup": "Erreur lors de la configuration post-connexion OBS (récupération des scènes) : {{message}}",
+        "connectionClosedOrLost": "La connexion OBS a été fermée ou perdue.",
+        "cannotFetchScenesNotConnected": "Impossible de récupérer les scènes OBS : Non connecté à OBS.",
+        "fetchingScenes": "Récupération des scènes OBS...",
+        "fetchedScenesCount": "{{count}} scènes récupérées depuis OBS.",
+        "failedToFetchScenes": "Échec de la récupération des scènes OBS ou aucune scène retournée.",
+        "errorFetchingScenes": "Erreur lors de la récupération des scènes OBS : {{message}}",
+        "cannotHighlightNotConnected": "Impossible de surligner : Non connecté à OBS.",
+        "highlightLayoutActiveManualLegacy": "La scène '{{sceneName}}' utilise la nouvelle disposition Surbrillance. Le bouton de surbrillance manuel peut avoir un effet limité ou être remplacé.",
+        "stoppingScreenShareForHighlight": "Un partage d'écran est actif ({{id}}). Arrêt avant la mise en surbrillance.",
+        "cannotScreenShareNotConnected": "Impossible de démarrer le partage d'écran : Non connecté à OBS.",
+        "unhighlightingForScreenShare": "Une caméra est en surbrillance ({{id}}). Retrait de la surbrillance avant de démarrer le partage d'écran.",
+        "cannotAddScreenShareNotConnected": "Impossible d'ajouter le partage d'écran : Non connecté à OBS.",
+        "cannotAddScreenShareNoRoom": "Impossible d'ajouter le partage d'écran : Le nom de salle VDO.Ninja est requis pour les URLs de partage d'écran.",
+        "cannotAddScreenShareNoReactionLayoutScene": "Impossible d'ajouter le partage d'écran : Aucune scène n'est configurée avec une disposition 'Réaction'.",
+        "addingUpdatingScreenShareToReactionScenes": "Ajout/Mise à jour de la source de partage d'écran '{{sourceName}}' (URL : {{url}}) aux scènes Réaction. Création principale dans '{{primaryScene}}'. ({{count}} scènes au total)",
+        "reconfiguringExistingScreenShare": "Reconfiguration de la source de partage d'écran existante '{{oldName}}' pour devenir '{{newName}}'.",
+        "reconfiguredRenamedScreenShare": "Source de partage d'écran existante reconfigurée et renommée en '{{sourceName}}'.",
+        "screenShareExistsUpdating": "La source de partage d'écran '{{sourceName}}' existe déjà. Mise à jour de ses paramètres.",
+        "creatingNewScreenShareInScene": "Création d'une nouvelle source de partage d'écran '{{sourceName}}' dans la scène '{{sceneName}}'.",
+        "ensuredTransformedScreenShareReaction": "Source de partage d'écran '{{sourceName}}' assurée et transformée dans la scène Réaction '{{sceneName}}'.",
+        "sourceFoundInSceneEnabled": "Source '{{sourceName}}' trouvée dans la scène '{{sceneName}}', ID d'élément : {{itemId}}. Vérification qu'elle est activée.",
+        "sourceAddedToScene": "Source '{{sourceName}}' ajoutée à la scène '{{sceneName}}', ID d'élément : {{itemId}}.",
+        "errorCreatingSceneItem": "Erreur lors de la création de l'élément de scène pour '{{sourceName}}' dans '{{sceneName}}' : {{message}}",
+        "errorCheckingSceneForItem": "Erreur lors de la vérification de '{{sourceName}}' dans la scène '{{sceneName}}' : {{message}}",
+        "errorApplyingInitialTransform": "Erreur lors de l'application de la transformation par défaut initiale à '{{sourceName}}' dans '{{sceneName}}' : {{message}}",
+        "successConfigScreenShare": "Partage d'écran configuré avec succès pour le flux {{streamId}} ({{label}}).",
+        "errorAddingUpdatingScreenShare": "Erreur lors de l'ajout/mise à jour de la source de partage d'écran '{{sourceName}}' : {{message}}.",
+        "cannotToggleHighlightNotConnected": "Impossible de basculer la surbrillance : Non connecté à OBS.",
+        "streamUnhighlighted": "Flux {{id}} non surligné (renommé de {{oldName}} à {{newName}}).",
+        "streamSuccessfullyUnhighlighted": "Flux {{id}} non surligné avec succès (renommé en {{newName}}).",
+        "streamSuccessfullyHighlighted": "Flux {{id}} surligné avec succès (renommé en {{newName}}).",
+        "unhighlightError": "Impossible de retirer la surbrillance (renommer) {{sourceName}}, il pourrait ne pas exister ou autre erreur : {{message}}",
+        "highlightError": "Impossible de surligner (renommer) {{sourceName}}, il pourrait ne pas exister ou autre erreur : {{message}}",
+        "legacyHighlightUnhighlightOnRemove": "Le flux {{id}} était surligné (ancien système). Retrait de la surbrillance.",
+        "cannotAddStreamNotConnected": "Impossible d'ajouter le flux \"{{label}}\" ({{id}}) à OBS : Non connecté à OBS.",
+        "cannotAddStreamNoTargetSceneName": "Impossible d'ajouter le flux \"{{label}}\" ({{id}}) : Le nom de la scène OBS cible est requis mais non défini (pas de défaut ni de correspondance).",
+        "foundExistingStandardSource": "Source standard existante '{{sourceName}}' trouvée pour le flux {{streamId}}.",
+        "foundExistingHighlightForConnectingStream": "Source OBS existante '{{sourceName}}' trouvée qui correspond au nommage de surbrillance pour le flux connecté {{streamId}}. Mise à jour de l'état de surbrillance interne.",
+        "foundExistingHighlightedSource": "Source surlignée existante '{{sourceName}}' trouvée pour le flux {{streamId}}.",
+        "noExistingSourceFoundWillCreate": "Ni la source standard ('{{baseSourceName}}') ni la source surlignée ('{{highlightedSourceName}}') n'ont été trouvées pour le flux {{streamId}}. Création d'une nouvelle.",
+        "noExistingStandardSourceSamePrefix": "Source standard '{{sourceName}}' non trouvée pour le flux {{streamId}} (le préfixe de surbrillance est identique). Création d'une nouvelle.",
+        "errorGettingCanvasSize": "Erreur lors de l'obtention de la taille du canvas OBS : {{message}}. Utilisation par défaut de {{width}}x{{height}}.",
+        "sourceNotGlobalCreating": "La source '{{sourceName}}' n'existe pas globalement. Création dans la scène '{{sceneName}}'.",
+        "sourceCreatedAddedToScene": "Source '{{sourceName}}' créée et ajoutée à la scène '{{sceneName}}'.",
+        "sourceGlobalUpdatingWithUrl": "La source '{{sourceName}}' existe déjà globalement. Mise à jour de ses paramètres. URL : {{url}}",
+        "sourceFoundAsItemInScene": "Source '{{sourceName}}' trouvée comme élément dans la scène '{{sceneName}}'.",
+        "sourceNotInSceneAdding": "Source '{{sourceName}}' pas dans la scène '{{sceneName}}'. Ajout en cours.",
+        "cloningToMainScene": "Clonage de la source '{{sourceName}}' vers la scène principale (depuis les cases cochées) '{{sceneName}}' en raison de la règle de correspondance.",
+        "addingSourceToOtherScene": "Ajout de la source '{{sourceName}}' comme élément à l'autre scène sélectionnée '{{sceneName}}'.",
+        "switchingProgramScene": "Basculement de la scène de programme OBS actuelle vers '{{sceneName}}'.",
+        "successfullyProcessedStream": "Flux \"{{label}}\" ({{id}}) traité avec succès, source OBS effective : '{{sourceName}}'.",
+        "errorManagingStream": "Erreur lors de la gestion du flux '{{sourceName}}' (\"{{label}}\") dans OBS : {{message}}",
+        "applyTransformAndGridCalled": "applyTransformAndGrid appelé pour {{sourceName}} dans {{sceneName}}. Déclenchement de la mise à jour complète de la disposition pour la scène.",
+        "triggeringLayoutUpdate": "Déclenchement de la mise à jour de la disposition pour la scène '{{sceneName}}'...",
+        "gridFallbackSourceChanged": "Les paramètres de grille pour '{{sourceGridScene}}' (candidat principal de secours) ont changé. Déclenchement de la mise à jour pour la scène Réaction/Surbrillance '{{dependentScene}}'.",
+        "noSceneItemsForLayout": "Aucun élément de scène trouvé dans la scène '{{sceneName}}' pour la mise à jour de la disposition.",
+        "applyingConfiguredLayout": "Application de la disposition '{{layoutType}}' à la scène '{{sceneName}}'. ({{count}} éléments)",
+        "unknownLayoutType": "Type de disposition '{{layoutType}}' inconnu pour la scène '{{sceneName}}'. Application du dimensionnement par défaut.",
+        "noSpecificLayoutApplyingDefault": "Pas de disposition spécifique pour la scène '{{sceneName}}'. Application du dimensionnement par défaut des sources ('{{sizing}}').",
+        "errorTriggeringLayoutUpdate": "Erreur lors de la mise à jour de la disposition pour la scène '{{sceneName}}' : {{message}}",
+        "applyingDefaultSizing": "Application du dimensionnement par défaut des sources ('{{sizing}}') à {{count}} éléments dans la scène '{{sceneName}}'.",
+        "errorApplyingDefaultTransformItem": "Erreur lors de l'application de la transformation par défaut à {{sourceName}} dans {{sceneName}} : {{message}}",
+        "noSourcesForGridLayout": "Aucune source de caméra VDO.Ninja pour appliquer la disposition Grille dans la scène '{{sceneName}}'.",
+        "applyingGridLayoutScene": "Application de la disposition Grille à {{count}} sources de caméra VDO.Ninja dans la scène '{{sceneName}}'.",
+        "applyingGridSplitScreen": "Application de la disposition grille à écran partagé 2 caméras à la scène '{{sceneName}}'.",
+        "reactionMainNotFoundFallbackGrid": "Contenu principal pour la disposition Réaction dans la scène '{{sceneName}}' non trouvé/visible. Application de la grille de caméras de secours.",
+        "highlightMainNotFoundFallbackGrid": "Contenu principal pour la disposition Surbrillance dans la scène '{{sceneName}}' non trouvé/visible. Application de la grille de caméras de secours.",
+        "usingGridSceneFallbackSettings": "Utilisation des paramètres de grille de la première scène de disposition 'Grille' configurée ('{{sceneName}}') comme secours pour '{{targetScene}}'.",
+        "usingDefaultGridFallbackSettings": "Aucune scène de disposition 'Grille' trouvée. Utilisation des paramètres de grille par défaut comme secours pour '{{targetScene}}'.",
+        "applyingFallbackGridToCameras": "Application de la disposition Grille de secours à {{count}} sources de caméra dans la scène '{{sceneName}}'.",
+        "noCamerasForFallbackGridHidingAll": "Aucun élément de caméra à afficher dans la grille de secours pour la scène '{{sceneName}}'. Toutes les sources VDO dans cette scène seront masquées.",
+        "cannotRemoveStreamNotConnected": "Impossible de retirer le flux {{id}} d'OBS : Non connecté à OBS.",
+        "triggeredRemoval": "Suppression déclenchée par l'utilisateur ou automatique du flux '{{id}}' d'OBS. Source de base : '{{baseName}}'.",
+        "streamScreenSharingRemoving": "Le flux {{id}} partageait activement l'écran. Lancement de la suppression du partage d'écran.",
+        "finishedRemovingSourceItems": "Suppression terminée des éléments source pour le flux {{id}} des scènes OBS spécifiées.",
+        "cannotRemoveScreenShareNotConnected": "Impossible de retirer le partage d'écran : Non connecté à OBS.",
+        "attemptingRemoveScreenShareSource": "Tentative de suppression complète de la source de partage d'écran '{{sourceName}}' d'OBS (toutes les scènes et entrée).",
+        "removingGlobalInput": "Suppression de l'entrée globale '{{sourceName}}' d'OBS.",
+        "successfullyRemovedInput": "Entrée '{{sourceName}}' supprimée avec succès.",
+        "errorScreenShareRemovalProcess": "Erreur lors du processus de suppression du partage d'écran pour '{{sourceName}}' : {{message}}",
+        "removingSourceItemFromScene": "Suppression de l'élément source '{{sourceName}}' (ID : {{itemId}}) de la scène '{{sceneName}}'.",
+        "errorTryingRemoveSourceItem": "Erreur lors de la tentative de suppression de l'élément source '{{sourceName}}' de la scène '{{sceneName}}' : {{message}}",
+        "codecChangedUpdatingSources": "Codec changé en : {{codec}}. Mise à jour des sources OBS...",
+        "codecChangedNotConnected": "OBS n'est pas connecté. Les sources ne seront pas mises à jour avec le nouveau codec jusqu'à la reconnexion et une nouvelle action.",
+        "sourceUpdatedWithUrlAndCss": "Source '{{sourceName}}' mise à jour avec l'URL : {{url}} et CSS personnalisé.",
+        "screenShareSourceUpdatedWithUrlAndCss": "Source de partage d'écran '{{sourceName}}' mise à jour avec l'URL : {{url}} et CSS personnalisé.",
+        "codecUpdateComplete": "Mise à jour du codec pour les sources OBS terminée.",
+        "codecCssUpdateComplete": "Mise à jour du codec/CSS pour les sources OBS terminée.",
+        "inputNameChanged": "Événement OBS : Le nom d'entrée a changé de '{{oldName}}' à '{{newName}}'. Vérification des scènes pertinentes pour les mises à jour de disposition.",
+        "foundPreExistingHighlight": "Source surlignée préexistante trouvée dans OBS : '{{sourceName}}'. Définition de la surbrillance active sur l'ID de flux : {{streamId}}.",
+        "errorCheckingMainContentEnabled": "Erreur lors de la vérification si le contenu principal {{sourceName}} est activé : {{message}}"
+    }
+  }
+}
\ No newline at end of file
diff --git a/obs/locales/it.json b/obs/locales/it.json
new file mode 100644
index 0000000..fd5cf6d
--- /dev/null
+++ b/obs/locales/it.json
@@ -0,0 +1,312 @@
+{
+  "pageTitle": "VDO.Ninja Controllo OBS Dock",
+  "mainHeading": "VDO.Ninja Controllo OBS",
+  "languageSwitcher": {
+    "label": "Lingua:"
+  },
+  "collapsible": {
+    "clickToExpand": "Clicca per espandere",
+    "clickToCollapse": "Clicca per comprimere"
+  },
+  "customCss": {
+    "title": "CSS Personalizzato",
+    "label": "Inserisci qui il tuo CSS personalizzato:",
+    "description": "Questo CSS verrà applicato alle sorgenti."
+  },
+  "obsConnection": {
+    "title": "Connessione WebSocket OBS",
+    "websocketUrlLabel": "URL WebSocket:",
+    "passwordLabel": "Password:",
+    "cameraPrefixLabel": "Prefisso generale Camera:",
+    "reactionPrefixLabel": "Prefisso Reazione: VDO.",
+    "highlightPrefixLabel": "Prefisso Evidenziazione: VDO.",
+    "reactionPrefixDynamicLabel": "Prefisso Reazione: {{prefix}}{{separator}}{{subPrefix}}",
+    "highlightPrefixDynamicLabel": "Prefisso Evidenziazione: {{prefix}}{{separator}}{{subPrefix}}",
+    "connectButton": "Connetti",
+    "disconnectButton": "Disconnetti",
+    "statusDisconnected": "Stato: Disconnesso",
+    "statusConnected": "Stato: Connesso",
+    "statusConnecting": "Stato: Connessione in corso...",
+    "statusError": "Stato: Errore",
+    "statusErrorUrlMissing": "Stato: Errore - URL mancante",
+    "statusErrorTimeout": "Stato: Errore - Timeout connessione",
+    "statusErrorCameraPrefixMissing": "Stato: Errore - Prefisso Camera mancante"
+  },
+  "vdoNinjaSettings": {
+    "title": "Impostazioni VDO.Ninja",
+    "baseUrlLabel": "URL Base VDO.Ninja:",
+    "baseUrlPlaceholder": "https://vdo.ninja",
+    "roomNameLabel": "Nome Stanza:",
+    "roomNamePlaceholder": "es., MiaStanzaNinja",
+    "passwordLabel": "Password:",
+    "passwordPlaceholder": "Stanza o &password",
+    "streamIdsLabel": "ID Stream:",
+    "streamIdsPlaceholder": "streamId1,streamId2",
+    "roomOrStreamIdsNeeded": "Nome Stanza o ID Stream necessario",
+    "connectButton": "Connetti",
+    "disconnectButton": "Disconnetti",
+    "cancelButton": "Annulla",
+    "statusDisconnected": "Stato: Disconnesso",
+    "statusConnected": "Stato: Connesso",
+    "statusConnecting": "Stato: Connessione in corso...",
+    "statusConnectionFailed": "Stato: Connessione fallita",
+    "statusConnectionLost": "Stato: Connessione persa"
+  },
+  "streamIdMappings": {
+    "title": "Mappature ID Stream",
+    "addNewMappingButton": "Aggiungi Nuova Mappatura",
+    "ruleTitle": "Regola Mappatura Stream",
+    "streamIdPlaceholder": "ID Stream",
+    "streamIdTooltip": "ID Stream VDO.Ninja",
+    "labelPlaceholder": "Etichetta (opzionale)",
+    "labelTooltip": "Etichetta Stream VDO.Ninja",
+    "matchTypeTooltip": "Come abbinare lo stream",
+    "matchType": {
+        "idOnly": "Solo ID",
+        "labelOnly": "Solo Etichetta",
+        "bothRequired": "Entrambi Richiesti",
+        "eitherMatch": "Uno dei due"
+    },
+    "targetSceneTooltip": "Scena OBS di destinazione",
+    "selectSceneOption": "Seleziona una scena...",
+    "removeRuleTooltip": "Rimuovi questa regola di mappatura",
+    "cloneToMainSceneLabel": "Clona nella scena principale",
+    "switchToSceneOnAddLabel": "Passa alla scena all'aggiunta",
+    "ruleDescription": "Definisci come gli stream in arrivo vengono indirizzati alle scene OBS."
+  },
+  "obsTargetSettings": {
+    "title": "Impostazioni Destinazione OBS",
+    "sourceCreationScenesLabel": "Scene per la Creazione di Sorgenti:",
+    "sourceCreationScenesDesc": "Seleziona una o più scene. La prima sarà la principale, le altre per la copia.",
+    "loadingScenes": "Caricamento scene...",
+    "noScenesFound": "Nessuna scena trovata",
+    "refetchScenesButton": "Ricarica Scene",
+    "screenShareSettings": {
+        "title": "Impostazioni Condivisione Schermo:",
+        "widthLabel": "Larghezza:",
+        "heightLabel": "Altezza:",
+        "resolutionNote": "Questa risoluzione verrà utilizzata per le sorgenti di condivisione schermo nelle scene con layout 'Reazione'."
+    },
+    "autoAddSourcesLabel": "Aggiungi automaticamente nuovi stream come sorgenti",
+    "autoRemoveSourcesLabel": "Rimuovi automaticamente sorgenti alla disconnessione",
+    "newSourceSizing": {
+        "label": "Dimensionamento Sorgente Predefinito:",
+        "defaultSizeOption": "Predefinito (1920x1080 a 0,0)",
+        "bestFitOption": "Adatta al meglio (Mantieni Proporzioni)",
+        "stretchToFillOption": "Estendi per Riempire lo Schermo",
+        "overrideNote": "I layout specifici definiti nella sezione \"Layout\" sovrascriveranno questi per quelle scene."
+    },
+    "codec": {
+        "label": "Codec:",
+        "noneOption": "nessuno",
+        "learnMoreTitle": "Scopri di più sulle opzioni codec"
+    }
+  },
+  "sceneLayouts": {
+    "title": "Layout Scene",
+    "addNewLayoutButton": "Aggiungi Nuovo Layout",
+    "description": "Definisci layout automatici per scene OBS specifiche. Questi sovrascriveranno il dimensionamento sorgente predefinito per le scene configurate.",
+    "sceneLabel": "Scena:",
+    "selectSceneOption": "Seleziona Scena...",
+    "layoutLabel": "Layout:",
+    "selectLayoutOption": "Seleziona Layout...",
+    "layoutTypes": {
+        "grid": "Griglia",
+        "reaction": "Reazione",
+        "highlight": "Evidenziazione"
+    },
+    "noActiveLayouts": "Nessun layout attivo",
+    "removeLayoutTooltip": "Rimuovi questa configurazione layout",
+    "sceneAlreadyConfiguredTooltip": "(Già in uso)",
+    "sceneAlreadyConfiguredAlert": "La scena '{{sceneName}}' è già in uso da un'altra configurazione layout.",
+    "controls": {
+        "margin": "Margine",
+        "spacing": "Spaziatura",
+        "offsetX": "Offset X",
+        "offsetY": "Offset Y",
+        "gridSplitScreenTwoCameras": "Schermo diviso per 2 telecamere (Griglia)",
+        "distributeCameras": "Distribuisci telecamere (Reazione/Evidenziazione)"
+    }
+  },
+  "activeStreams": {
+    "title": "Stream Attivi",
+    "noActiveStreams": "Nessuno stream attivo",
+    "streamIdLabel": "ID: {{id}}",
+    "labelLabel": "Etichetta: {{label}}",
+    "targetSceneLabelText": "Scena Destinazione: {{sceneName}}",
+    "notSet": "Non Impostato",
+    "defaultSceneTag": "predefinita",
+    "mappedSceneTag": "mappata",
+    "addedToObs": "✓ Aggiunto a OBS",
+    "notInObs": "✗ Non in OBS",
+    "buttons": {
+        "addToObs": "Aggiungi a OBS",
+        "removeFromObs": "Rimuovi da OBS",
+        "highlight": "Evidenzia",
+        "unhighlight": "Rimuovi evidenziazione",
+        "screenShare": "Condividi Schermo",
+        "stopScreenShare": "Ferma Condivisione Schermo"
+    }
+  },
+  "log": {
+    "title": "Registro"
+  },
+  "vdoNinja": {
+    "defaultStreamLabel": "Stream {{id}}"
+  },
+  "logMessages": {
+    "settingsSaved": "Impostazioni salvate.",
+    "settingsLoaded": "Impostazioni caricate da localStorage.",
+    "customCssChangedWillApplyToSource": "Input CSS personalizzato modificato. Verrà applicato direttamente alle impostazioni della sorgente OBS alla prossima creazione/aggiornamento.",
+    "errorLoadingSettings": "Errore nel caricamento delle impostazioni da localStorage: {{message}}. Utilizzo dei valori predefiniti.",
+    "noSavedSettings": "Nessuna impostazione salvata trovata. Utilizzo dei valori predefiniti.",
+    "appInitialized": "VDO.Ninja OBS Control Dock Inizializzato. Benvenuto!",
+    "jsShaLoaded": "Libreria jsSHA caricata con successo (fallback per Web Crypto).",
+    "errorLoadingJsSha": "Errore: Impossibile caricare la libreria jsSHA. L'autenticazione OBS potrebbe fallire se anche Web Crypto non è disponibile.",
+    "loadedStreamMappings": "Caricate {{count}} mappature stream.",
+    "errorLoadingStreamMappings": "Errore nel caricamento delle mappature stream da localStorage: {{message}}",
+    "warningStreamMappingElementsNotFound": "Attenzione: Impossibile trovare tutti gli elementi previsti in un div UI di mappatura stream.",
+    "loadedLayoutConfigs": "Caricate {{count}} configurazioni layout scene.",
+    "errorLoadingLayoutConfigs": "Errore nel caricamento delle configurazioni layout scene: {{message}}",
+    "savedLayoutConfigs": "Salvate {{count}} configurazioni layout scene.",
+    "errorSavingLayoutsDuplicateScene": "Errore nel salvataggio dei layout: La scena '{{sceneName}}' è configurata più volte. Assicurati che ogni scena abbia un solo layout.",
+    "layoutSceneNotFound": "Scena salvata '{{sceneName}}' per il layout non trovata nelle scene OBS correnti.",
+    "errorHidingSource": "Errore nel nascondere l'elemento sorgente {{sourceName}} in {{sceneName}}: {{message}}",
+    "sceneAlreadyConfiguredError": "La scena '{{sceneName}}' è già configurata per un altro layout. Ripristino della selezione.",
+    "vdoNinja": {
+        "disconnected": "Disconnesso da VDO.Ninja.",
+        "alreadyConnected": "Già connesso a VDO.Ninja.",
+        "errorRoomOrStreamIdNeeded": "Errore VDO.Ninja: Nome Stanza o ID Stream devono essere forniti.",
+        "connectionTimeout": "Timeout connessione VDO.Ninja. Nessuna attività ricevuta dall'iframe.",
+        "roomOrStreamIdNeededForConnect": "VDO.Ninja: Nome Stanza o ID Stream specifici devono essere forniti per connettersi.",
+        "streamIdsEmptyAfterTrim": "VDO.Ninja: ID Stream forniti ma risultavano vuoti dopo il trim.",
+        "initializingIframe": "Inizializzazione iframe VDO.Ninja con URL: {{url}}",
+        "invalidBaseUrl": "URL base VDO.Ninja non valido nelle impostazioni: {{url}}",
+        "iframeConnectedActive": "Connessione iframe VDO.Ninja stabilita e attiva.",
+        "streamConnectedActive": "Stream VDO.Ninja connesso/attivo: \"{{label}}\" (ID: {{id}})",
+        "autoAddingStream": "Aggiunta automatica stream {{id}} a OBS.",
+        "streamDisconnectedInactive": "Stream VDO.Ninja disconnesso/inattivo: \"{{label}}\" (ID: {{id}})",
+        "autoRemovingStream": "Rimozione automatica stream {{id}} da OBS.",
+        "streamLabelUpdated": "Etichetta stream VDO.Ninja aggiornata per ID {{id}}: \"{{newLabel}}\" (era \"{{oldLabel}}\")",
+        "connectionLostResetting": "Connessione VDO.Ninja persa (nessuna attività dall'iframe). Tentativo di reset."
+    },
+    "obs": {
+        "disconnecting": "Disconnessione da OBS WebSocket...",
+        "errorCameraPrefixRequired": "Errore: Prefisso generale Camera richiesto per la connessione OBS.",
+        "errorUrlRequired": "Errore: URL OBS WebSocket richiesto.",
+        "attemptingConnection": "Tentativo di connessione a OBS WebSocket a {{url}}...",
+        "connectionTimeout": "Timeout tentativo connessione OBS WebSocket.",
+        "connectionOpenedWaitingHello": "Connessione OBS WebSocket aperta. In attesa del Server Hello...",
+        "receivedHelloSendingIdentify": "Ricevuto Hello da OBS. Invio Identify...",
+        "authDataPrepared": "Dati di autenticazione preparati per il messaggio Identify.",
+        "warningAuthRequiredNoPassword": "Attenzione: Il server OBS richiede autenticazione, ma nessuna password fornita.",
+        "authSuccessConnected": "Autenticazione OBS WebSocket riuscita! Connessione stabilita.",
+        "requestError": "Errore Richiesta OBS (Tipo: {{type}}, ID: {{id}}): {{error}} (Codice: {{code}})",
+        "eventSceneListChanged": "Evento OBS: Lista scene modificata. Ricaricamento scene.",
+        "errorProcessingMessage": "Errore nell'elaborazione del messaggio OBS WebSocket: {{message}}. Dati: {{data}}",
+        "webSocketError": "Errore OBS WebSocket: {{error}}",
+        "authFailedReason": "Autenticazione fallita - password errata o autenticazione richiesta e non fornita.",
+        "connectionClosedReasonCode": "Codice: {{code}}{{wasClean}}",
+        "uncleanDisconnection": " (Disconnessione non pulita)",
+        "connectionClosed": "Connessione OBS WebSocket chiusa. Motivo: {{reason}}",
+        "errorCreatingConnection": "Errore nella creazione della connessione OBS WebSocket: {{message}}",
+        "authGenerationError": "Errore generazione autenticazione OBS: {{message}}",
+        "cannotSendRequestNotConnected": "Impossibile inviare richiesta '{{requestType}}': Non connesso a OBS.",
+        "errorSendingRequest": "Errore nell'invio della richiesta OBS '{{requestType}}': {{message}}",
+        "requestTimeout": "Timeout richiesta OBS '{{requestType}}' (ID: {{id}}).",
+        "connectionEstablishedFetchingData": "Connessione OBS completamente stabilita. Recupero dati iniziali...",
+        "errorPostConnectionSetup": "Errore durante la configurazione post-connessione OBS (recupero scene): {{message}}",
+        "connectionClosedOrLost": "La connessione OBS è stata chiusa o persa.",
+        "cannotFetchScenesNotConnected": "Impossibile recuperare scene OBS: Non connesso a OBS.",
+        "fetchingScenes": "Recupero scene OBS...",
+        "fetchedScenesCount": "Recuperate {{count}} scene da OBS.",
+        "failedToFetchScenes": "Impossibile recuperare scene OBS o nessuna scena restituita.",
+        "errorFetchingScenes": "Errore nel recupero delle scene OBS: {{message}}",
+        "cannotHighlightNotConnected": "Impossibile evidenziare: Non connesso a OBS.",
+        "highlightLayoutActiveManualLegacy": "La scena '{{sceneName}}' usa il nuovo Layout Evidenziazione. Il pulsante evidenziazione manuale potrebbe avere effetto limitato o essere superato.",
+        "stoppingScreenShareForHighlight": "Una condivisione schermo è attiva ({{id}}). Interruzione prima dell'evidenziazione.",
+        "cannotScreenShareNotConnected": "Impossibile avviare condivisione schermo: Non connesso a OBS.",
+        "unhighlightingForScreenShare": "Una telecamera è evidenziata ({{id}}). Rimozione evidenziazione prima di avviare la condivisione schermo.",
+        "cannotAddScreenShareNotConnected": "Impossibile aggiungere condivisione schermo: Non connesso a OBS.",
+        "cannotAddScreenShareNoRoom": "Impossibile aggiungere condivisione schermo: Nome stanza VDO.Ninja richiesto per URL condivisione schermo.",
+        "cannotAddScreenShareNoReactionLayoutScene": "Impossibile aggiungere condivisione schermo: Nessuna scena configurata con layout 'Reazione'.",
+        "addingUpdatingScreenShareToReactionScenes": "Aggiunta/Aggiornamento sorgente condivisione schermo '{{sourceName}}' (URL: {{url}}) alle scene Reazione. Creazione primaria in '{{primaryScene}}'. ({{count}} scene totali)",
+        "reconfiguringExistingScreenShare": "Riconfigurazione sorgente condivisione schermo esistente '{{oldName}}' per essere '{{newName}}'.",
+        "reconfiguredRenamedScreenShare": "Riconfigurata e rinominata sorgente condivisione schermo esistente a '{{sourceName}}'.",
+        "screenShareExistsUpdating": "Sorgente condivisione schermo '{{sourceName}}' già esistente. Aggiornamento impostazioni.",
+        "creatingNewScreenShareInScene": "Creazione nuova sorgente condivisione schermo '{{sourceName}}' nella scena '{{sceneName}}'.",
+        "ensuredTransformedScreenShareReaction": "Assicurata e trasformata sorgente condivisione schermo '{{sourceName}}' nella scena Reazione '{{sceneName}}'.",
+        "sourceFoundInSceneEnabled": "Sorgente '{{sourceName}}' trovata nella scena '{{sceneName}}', ID elemento: {{itemId}}. Assicurandosi che sia abilitata.",
+        "sourceAddedToScene": "Sorgente '{{sourceName}}' aggiunta alla scena '{{sceneName}}', ID elemento: {{itemId}}.",
+        "errorCreatingSceneItem": "Errore nella creazione dell'elemento scena per '{{sourceName}}' in '{{sceneName}}': {{message}}",
+        "errorCheckingSceneForItem": "Errore nel controllo per '{{sourceName}}' nella scena '{{sceneName}}': {{message}}",
+        "errorApplyingInitialTransform": "Errore nell'applicazione della trasformazione predefinita iniziale a '{{sourceName}}' in '{{sceneName}}': {{message}}",
+        "successConfigScreenShare": "Condivisione schermo configurata con successo per lo stream {{streamId}} ({{label}}).",
+        "errorAddingUpdatingScreenShare": "Errore nell'aggiunta/aggiornamento sorgente condivisione schermo '{{sourceName}}': {{message}}.",
+        "cannotToggleHighlightNotConnected": "Impossibile alternare evidenziazione: Non connesso a OBS.",
+        "streamUnhighlighted": "Stream {{id}} non più evidenziato (rinominato da {{oldName}} a {{newName}}).",
+        "streamSuccessfullyUnhighlighted": "Stream {{id}} non più evidenziato con successo (rinominato a {{newName}}).",
+        "streamSuccessfullyHighlighted": "Stream {{id}} evidenziato con successo (rinominato a {{newName}}).",
+        "unhighlightError": "Impossibile rimuovere evidenziazione (rinominare) {{sourceName}}, potrebbe non esistere o altro errore: {{message}}",
+        "highlightError": "Impossibile evidenziare (rinominare) {{sourceName}}, potrebbe non esistere o altro errore: {{message}}",
+        "legacyHighlightUnhighlightOnRemove": "Lo stream {{id}} era evidenziato legacy. Rimozione evidenziazione.",
+        "cannotAddStreamNotConnected": "Impossibile aggiungere stream \"{{label}}\" ({{id}}) a OBS: Non connesso a OBS.",
+        "cannotAddStreamNoTargetSceneName": "Impossibile aggiungere stream \"{{label}}\" ({{id}}): Nome scena OBS di destinazione richiesto ma non impostato (nessun default e nessuna mappatura).",
+        "foundExistingStandardSource": "Trovata sorgente standard esistente '{{sourceName}}' per lo stream {{streamId}}.",
+        "foundExistingHighlightForConnectingStream": "Trovata sorgente OBS esistente '{{sourceName}}' che corrisponde alla denominazione evidenziazione per lo stream connesso {{streamId}}. Aggiornamento stato evidenziazione interno.",
+        "foundExistingHighlightedSource": "Trovata sorgente evidenziata esistente '{{sourceName}}' per lo stream {{streamId}}.",
+        "noExistingSourceFoundWillCreate": "Né sorgente standard ('{{baseSourceName}}') né evidenziata ('{{highlightedSourceName}}') trovata per lo stream {{streamId}}. Verrà creata nuova.",
+        "noExistingStandardSourceSamePrefix": "Sorgente standard '{{sourceName}}' non trovata per lo stream {{streamId}} (prefisso evidenziazione è lo stesso). Verrà creata nuova.",
+        "errorGettingCanvasSize": "Errore nel recupero dimensioni canvas OBS: {{message}}. Utilizzo predefinito {{width}}x{{height}}.",
+        "sourceNotGlobalCreating": "La sorgente '{{sourceName}}' non esiste globalmente. Creazione nella scena '{{sceneName}}'.",
+        "sourceCreatedAddedToScene": "Sorgente '{{sourceName}}' creata e aggiunta alla scena '{{sceneName}}'.",
+        "sourceGlobalUpdatingWithUrl": "La sorgente '{{sourceName}}' esiste già globalmente. Aggiornamento impostazioni. URL: {{url}}",
+        "sourceFoundAsItemInScene": "Sorgente '{{sourceName}}' trovata come elemento nella scena '{{sceneName}}'.",
+        "sourceNotInSceneAdding": "Sorgente '{{sourceName}}' non nella scena '{{sceneName}}'. Aggiunta in corso.",
+        "cloningToMainScene": "Clonazione sorgente '{{sourceName}}' alla scena principale (da checkbox) '{{sceneName}}' a causa della regola di mappatura.",
+        "addingSourceToOtherScene": "Aggiunta sorgente '{{sourceName}}' come elemento ad altra scena selezionata '{{sceneName}}'.",
+        "switchingProgramScene": "Cambio scena programma corrente OBS a '{{sceneName}}'.",
+        "successfullyProcessedStream": "Stream elaborato con successo \"{{label}}\" ({{id}}), sorgente OBS effettiva: '{{sourceName}}'.",
+        "errorManagingStream": "Errore nella gestione dello stream '{{sourceName}}' (\"{{label}}\") in OBS: {{message}}",
+        "applyTransformAndGridCalled": "applyTransformAndGrid chiamato per {{sourceName}} in {{sceneName}}. Attivazione aggiornamento layout completo per la scena.",
+        "triggeringLayoutUpdate": "Attivazione aggiornamento layout per la scena '{{sceneName}}'...",
+        "gridFallbackSourceChanged": "Impostazioni griglia per '{{sourceGridScene}}' (candidato fallback primario) modificate. Attivazione aggiornamento per scena Reazione/Evidenziazione '{{dependentScene}}'.",
+        "noSceneItemsForLayout": "Nessun elemento scena trovato nella scena '{{sceneName}}' per aggiornamento layout.",
+        "applyingConfiguredLayout": "Applicazione layout '{{layoutType}}' alla scena '{{sceneName}}'. ({{count}} elementi)",
+        "unknownLayoutType": "Tipo layout sconosciuto '{{layoutType}}' per la scena '{{sceneName}}'. Applicazione dimensionamento predefinito.",
+        "noSpecificLayoutApplyingDefault": "Nessun layout specifico per la scena '{{sceneName}}'. Applicazione dimensionamento sorgente predefinito ('{{sizing}}').",
+        "errorTriggeringLayoutUpdate": "Errore durante l'aggiornamento layout per la scena '{{sceneName}}': {{message}}",
+        "applyingDefaultSizing": "Applicazione dimensionamento sorgente predefinito ('{{sizing}}') a {{count}} elementi nella scena '{{sceneName}}'.",
+        "errorApplyingDefaultTransformItem": "Errore nell'applicazione trasformazione predefinita a {{sourceName}} in {{sceneName}}: {{message}}",
+        "noSourcesForGridLayout": "Nessuna sorgente telecamera VDO.Ninja per applicare layout Griglia nella scena '{{sceneName}}'.",
+        "applyingGridLayoutScene": "Applicazione Layout Griglia a {{count}} sorgenti telecamera VDO.Ninja nella scena '{{sceneName}}'.",
+        "applyingGridSplitScreen": "Applicazione layout griglia schermo diviso 2 telecamere alla scena '{{sceneName}}'.",
+        "reactionMainNotFoundFallbackGrid": "Contenuto principale per layout Reazione nella scena '{{sceneName}}' non trovato/visibile. Applicazione griglia fallback delle telecamere.",
+        "highlightMainNotFoundFallbackGrid": "Contenuto principale per layout Evidenziazione nella scena '{{sceneName}}' non trovato/visibile. Applicazione griglia fallback delle telecamere.",
+        "usingGridSceneFallbackSettings": "Utilizzo impostazioni griglia dalla prima scena layout 'Griglia' configurata ('{{sceneName}}') come fallback per '{{targetScene}}'.",
+        "usingDefaultGridFallbackSettings": "Nessuna scena layout 'Griglia' trovata. Utilizzo impostazioni griglia predefinite come fallback per '{{targetScene}}'.",
+        "applyingFallbackGridToCameras": "Applicazione layout Griglia fallback a {{count}} sorgenti telecamera nella scena '{{sceneName}}'.",
+        "noCamerasForFallbackGridHidingAll": "Nessun elemento telecamera da visualizzare nella griglia fallback per la scena '{{sceneName}}'. Tutte le sorgenti VDO in questa scena saranno nascoste.",
+        "cannotRemoveStreamNotConnected": "Impossibile rimuovere stream {{id}} da OBS: Non connesso a OBS.",
+        "triggeredRemoval": "Rimozione stream '{{id}}' da OBS attivata da utente o automaticamente. Sorgente base: '{{baseName}}'.",
+        "streamScreenSharingRemoving": "Lo stream {{id}} stava condividendo attivamente lo schermo. Avvio rimozione condivisione schermo.",
+        "finishedRemovingSourceItems": "Completata rimozione elementi sorgente per lo stream {{id}} dalle scene OBS specificate.",
+        "cannotRemoveScreenShareNotConnected": "Impossibile rimuovere condivisione schermo: Non connesso a OBS.",
+        "attemptingRemoveScreenShareSource": "Tentativo di rimozione completa sorgente condivisione schermo '{{sourceName}}' da OBS (tutte le scene e input).",
+        "removingGlobalInput": "Rimozione input globale '{{sourceName}}' da OBS.",
+        "successfullyRemovedInput": "Input '{{sourceName}}' rimosso con successo.",
+        "errorScreenShareRemovalProcess": "Errore durante il processo di rimozione condivisione schermo per '{{sourceName}}': {{message}}",
+        "removingSourceItemFromScene": "Rimozione elemento sorgente '{{sourceName}}' (ID: {{itemId}}) dalla scena '{{sceneName}}'.",
+        "errorTryingRemoveSourceItem": "Errore nel tentativo di rimuovere elemento sorgente '{{sourceName}}' dalla scena '{{sceneName}}': {{message}}",
+        "codecChangedUpdatingSources": "Codec cambiato a: {{codec}}. Aggiornamento sorgenti OBS...",
+        "codecChangedNotConnected": "OBS non è connesso. Le sorgenti non verranno aggiornate con il nuovo codec fino alla riconnessione e una nuova azione.",
+        "sourceUpdatedWithUrlAndCss": "Sorgente '{{sourceName}}' aggiornata con URL: {{url}} e CSS personalizzato.",
+        "screenShareSourceUpdatedWithUrlAndCss": "Sorgente condivisione schermo '{{sourceName}}' aggiornata con URL: {{url}} e CSS personalizzato.",
+        "codecUpdateComplete": "Aggiornamento codec per sorgenti OBS completato.",
+        "codecCssUpdateComplete": "Aggiornamento codec/CSS per sorgenti OBS completato.",
+        "inputNameChanged": "Evento OBS: Nome input cambiato da '{{oldName}}' a '{{newName}}'. Controllo scene rilevanti per aggiornamenti layout.",
+        "foundPreExistingHighlight": "Trovata sorgente evidenziata pre-esistente in OBS: '{{sourceName}}'. Impostazione evidenziazione attiva su ID stream: {{streamId}}.",
+        "errorCheckingMainContentEnabled": "Errore nel controllare se il contenuto principale {{sourceName}} è abilitato: {{message}}"
+    }
+  }
+}
\ No newline at end of file
diff --git a/obs/locales/ja.json b/obs/locales/ja.json
new file mode 100644
index 0000000..e977667
--- /dev/null
+++ b/obs/locales/ja.json
@@ -0,0 +1,312 @@
+{
+  "pageTitle": "VDO.Ninja OBSコントロールドック",
+  "mainHeading": "VDO.Ninja OBSコントロール",
+  "languageSwitcher": {
+    "label": "言語："
+  },
+  "collapsible": {
+    "clickToExpand": "クリックして展開",
+    "clickToCollapse": "クリックして折りたたむ"
+  },
+  "customCss": {
+    "title": "カスタムCSS",
+    "label": "カスタムCSSをここに入力してください：",
+    "description": "このCSSはソースに適用されます。"
+  },
+  "obsConnection": {
+    "title": "OBS WebSocket接続",
+    "websocketUrlLabel": "WebSocket URL：",
+    "passwordLabel": "パスワード：",
+    "cameraPrefixLabel": "一般カメラプレフィックス：",
+    "reactionPrefixLabel": "リアクションプレフィックス：VDO.",
+    "highlightPrefixLabel": "ハイライトプレフィックス：VDO.",
+    "reactionPrefixDynamicLabel": "リアクションプレフィックス：{{prefix}}{{separator}}{{subPrefix}}",
+    "highlightPrefixDynamicLabel": "ハイライトプレフィックス：{{prefix}}{{separator}}{{subPrefix}}",
+    "connectButton": "接続",
+    "disconnectButton": "切断",
+    "statusDisconnected": "ステータス：切断済み",
+    "statusConnected": "ステータス：接続済み",
+    "statusConnecting": "ステータス：接続中...",
+    "statusError": "ステータス：エラー",
+    "statusErrorUrlMissing": "ステータス：エラー - URLが不足しています",
+    "statusErrorTimeout": "ステータス：エラー - 接続タイムアウト",
+    "statusErrorCameraPrefixMissing": "ステータス：エラー - カメラプレフィックスが不足しています"
+  },
+  "vdoNinjaSettings": {
+    "title": "VDO.Ninja設定",
+    "baseUrlLabel": "VDO.Ninjaベース URL：",
+    "baseUrlPlaceholder": "https://vdo.ninja",
+    "roomNameLabel": "ルーム名：",
+    "roomNamePlaceholder": "例：MyNinjaRoom",
+    "passwordLabel": "パスワード：",
+    "passwordPlaceholder": "ルームまたは &password",
+    "streamIdsLabel": "ストリームID：",
+    "streamIdsPlaceholder": "streamId1,streamId2",
+    "roomOrStreamIdsNeeded": "ルーム名またはストリームIDが必要です",
+    "connectButton": "接続",
+    "disconnectButton": "切断",
+    "cancelButton": "キャンセル",
+    "statusDisconnected": "ステータス：切断済み",
+    "statusConnected": "ステータス：接続済み",
+    "statusConnecting": "ステータス：接続中...",
+    "statusConnectionFailed": "ステータス：接続失敗",
+    "statusConnectionLost": "ステータス：接続が失われました"
+  },
+  "streamIdMappings": {
+    "title": "ストリームIDマッピング",
+    "addNewMappingButton": "新規マッピングを追加",
+    "ruleTitle": "ストリームマッピングルール",
+    "streamIdPlaceholder": "ストリームID",
+    "streamIdTooltip": "VDO.NinjaストリームID",
+    "labelPlaceholder": "ラベル（オプション）",
+    "labelTooltip": "VDO.Ninjaストリームラベル",
+    "matchTypeTooltip": "ストリームの照合方法",
+    "matchType": {
+        "idOnly": "IDのみ",
+        "labelOnly": "ラベルのみ",
+        "bothRequired": "両方必須",
+        "eitherMatch": "いずれか一致"
+    },
+    "targetSceneTooltip": "ターゲットOBSシーン",
+    "selectSceneOption": "シーンを選択...",
+    "removeRuleTooltip": "このマッピングルールを削除",
+    "cloneToMainSceneLabel": "メインシーンにクローン",
+    "switchToSceneOnAddLabel": "追加時にシーンに切り替え",
+    "ruleDescription": "受信ストリームをOBSシーンにルーティングする方法を定義します。"
+  },
+  "obsTargetSettings": {
+    "title": "OBSターゲット設定",
+    "sourceCreationScenesLabel": "ソース作成用シーン：",
+    "sourceCreationScenesDesc": "1つ以上のシーンを選択してください。最初がプライマリ、その他はコピー用です。",
+    "loadingScenes": "シーンを読み込み中...",
+    "noScenesFound": "シーンが見つかりません",
+    "refetchScenesButton": "シーンを再取得",
+    "screenShareSettings": {
+        "title": "画面共有設定：",
+        "widthLabel": "幅：",
+        "heightLabel": "高さ：",
+        "resolutionNote": "この解像度は「リアクション」レイアウトのシーンで画面共有ソースに使用されます。"
+    },
+    "autoAddSourcesLabel": "新しいストリームを自動的にソースとして追加",
+    "autoRemoveSourcesLabel": "切断時にソースを自動的に削除",
+    "newSourceSizing": {
+        "label": "デフォルトソースサイズ：",
+        "defaultSizeOption": "デフォルト（1920x1080 位置0,0）",
+        "bestFitOption": "最適フィット（アスペクト比を保持）",
+        "stretchToFillOption": "画面全体に引き伸ばす",
+        "overrideNote": "「レイアウト」セクションで定義された特定のレイアウトは、それらのシーンのこれらを上書きします。"
+    },
+    "codec": {
+        "label": "コーデック：",
+        "noneOption": "なし",
+        "learnMoreTitle": "コーデックオプションの詳細を確認"
+    }
+  },
+  "sceneLayouts": {
+    "title": "シーンレイアウト",
+    "addNewLayoutButton": "新規レイアウトを追加",
+    "description": "特定のOBSシーンの自動レイアウトを定義します。これらは設定されたシーンのデフォルトソースサイズを上書きします。",
+    "sceneLabel": "シーン：",
+    "selectSceneOption": "シーンを選択...",
+    "layoutLabel": "レイアウト：",
+    "selectLayoutOption": "レイアウトを選択...",
+    "layoutTypes": {
+        "grid": "グリッド",
+        "reaction": "リアクション",
+        "highlight": "ハイライト"
+    },
+    "noActiveLayouts": "アクティブなレイアウトがありません",
+    "removeLayoutTooltip": "このレイアウト設定を削除",
+    "sceneAlreadyConfiguredTooltip": "（すでに使用中）",
+    "sceneAlreadyConfiguredAlert": "シーン「{{sceneName}}」は既に別のレイアウト設定で使用されています。",
+    "controls": {
+        "margin": "マージン",
+        "spacing": "間隔",
+        "offsetX": "Xオフセット",
+        "offsetY": "Yオフセット",
+        "gridSplitScreenTwoCameras": "2カメラ分割画面（グリッド）",
+        "distributeCameras": "カメラを配置（リアクション/ハイライト）"
+    }
+  },
+  "activeStreams": {
+    "title": "アクティブストリーム",
+    "noActiveStreams": "アクティブなストリームがありません",
+    "streamIdLabel": "ID：{{id}}",
+    "labelLabel": "ラベル：{{label}}",
+    "targetSceneLabelText": "ターゲットシーン：{{sceneName}}",
+    "notSet": "未設定",
+    "defaultSceneTag": "デフォルト",
+    "mappedSceneTag": "マップ済み",
+    "addedToObs": "✓ OBSに追加済み",
+    "notInObs": "✗ OBSにありません",
+    "buttons": {
+        "addToObs": "OBSに追加",
+        "removeFromObs": "OBSから削除",
+        "highlight": "ハイライト",
+        "unhighlight": "ハイライト解除",
+        "screenShare": "画面共有",
+        "stopScreenShare": "画面共有を停止"
+    }
+  },
+  "log": {
+    "title": "ログ"
+  },
+  "vdoNinja": {
+    "defaultStreamLabel": "ストリーム {{id}}"
+  },
+  "logMessages": {
+    "settingsSaved": "設定が保存されました。",
+    "settingsLoaded": "設定がlocalStorageから読み込まれました。",
+    "customCssChangedWillApplyToSource": "カスタムCSS入力が変更されました。次回の作成/更新時にOBSソース設定に直接適用されます。",
+    "errorLoadingSettings": "localStorageから設定を読み込む際のエラー：{{message}}。デフォルト値を使用します。",
+    "noSavedSettings": "保存された設定が見つかりません。デフォルト値を使用します。",
+    "appInitialized": "VDO.Ninja OBSコントロールドックが初期化されました。ようこそ！",
+    "jsShaLoaded": "jsSHAライブラリが正常に読み込まれました（Web Cryptoのフォールバック）。",
+    "errorLoadingJsSha": "エラー：jsSHAライブラリの読み込みに失敗しました。Web Cryptoも利用できない場合、OBS認証が失敗する可能性があります。",
+    "loadedStreamMappings": "{{count}}個のストリームマッピングを読み込みました。",
+    "errorLoadingStreamMappings": "localStorageからストリームマッピングを読み込む際のエラー：{{message}}",
+    "warningStreamMappingElementsNotFound": "警告：ストリームマッピングUI divで期待される全ての要素が見つかりませんでした。",
+    "loadedLayoutConfigs": "{{count}}個のシーンレイアウト設定を読み込みました。",
+    "errorLoadingLayoutConfigs": "シーンレイアウト設定を読み込む際のエラー：{{message}}",
+    "savedLayoutConfigs": "{{count}}個のシーンレイアウト設定を保存しました。",
+    "errorSavingLayoutsDuplicateScene": "レイアウト保存エラー：シーン「{{sceneName}}」が複数回設定されています。各シーンには1つのレイアウトのみ設定してください。",
+    "layoutSceneNotFound": "レイアウト用に保存されたシーン「{{sceneName}}」が現在のOBSシーンに見つかりません。",
+    "errorHidingSource": "{{sceneName}}でソースアイテム{{sourceName}}を非表示にする際のエラー：{{message}}",
+    "sceneAlreadyConfiguredError": "シーン「{{sceneName}}」は既に別のレイアウトで設定されています。選択を元に戻します。",
+    "vdoNinja": {
+        "disconnected": "VDO.Ninjaから切断されました。",
+        "alreadyConnected": "既にVDO.Ninjaに接続されています。",
+        "errorRoomOrStreamIdNeeded": "VDO.Ninjaエラー：ルーム名またはストリームIDを指定する必要があります。",
+        "connectionTimeout": "VDO.Ninja接続がタイムアウトしました。iframeからの活動が受信されませんでした。",
+        "roomOrStreamIdNeededForConnect": "VDO.Ninja：接続するにはルーム名または特定のストリームIDを指定する必要があります。",
+        "streamIdsEmptyAfterTrim": "VDO.Ninja：ストリームIDが提供されましたが、トリミング後に空でした。",
+        "initializingIframe": "VDO.Ninja iframeを初期化中 URL：{{url}}",
+        "invalidBaseUrl": "設定のVDO.NinjaベースURLが無効です：{{url}}",
+        "iframeConnectedActive": "VDO.Ninja iframe接続が確立され、アクティブです。",
+        "streamConnectedActive": "VDO.Ninjaストリームが接続/アクティブ：「{{label}}」（ID：{{id}}）",
+        "autoAddingStream": "ストリーム{{id}}をOBSに自動追加しています。",
+        "streamDisconnectedInactive": "VDO.Ninjaストリームが切断/非アクティブ：「{{label}}」（ID：{{id}}）",
+        "autoRemovingStream": "ストリーム{{id}}をOBSから自動削除しています。",
+        "streamLabelUpdated": "ID {{id}}のVDO.Ninjaストリームラベルが更新されました：「{{newLabel}}」（以前は「{{oldLabel}}」）",
+        "connectionLostResetting": "VDO.Ninja接続が失われました（iframeからの活動なし）。リセットを試みています。"
+    },
+    "obs": {
+        "disconnecting": "OBS WebSocketから切断中...",
+        "errorCameraPrefixRequired": "エラー：OBS接続には一般カメラプレフィックスが必要です。",
+        "errorUrlRequired": "エラー：OBS WebSocket URLが必要です。",
+        "attemptingConnection": "{{url}}でOBS WebSocketへの接続を試みています...",
+        "connectionTimeout": "OBS WebSocket接続の試行がタイムアウトしました。",
+        "connectionOpenedWaitingHello": "OBS WebSocket接続が開かれました。サーバーHelloを待機中...",
+        "receivedHelloSendingIdentify": "OBSからHelloを受信しました。Identifyを送信中...",
+        "authDataPrepared": "Identifyメッセージ用の認証データが準備されました。",
+        "warningAuthRequiredNoPassword": "警告：OBSサーバーは認証を要求していますが、パスワードが提供されていません。",
+        "authSuccessConnected": "OBS WebSocket認証成功！接続が確立されました。",
+        "requestError": "OBSリクエストエラー（タイプ：{{type}}、ID：{{id}}）：{{error}}（コード：{{code}}）",
+        "eventSceneListChanged": "OBSイベント：シーンリストが変更されました。シーンを再取得中。",
+        "errorProcessingMessage": "OBS WebSocketメッセージの処理エラー：{{message}}。データ：{{data}}",
+        "webSocketError": "OBS WebSocketエラー：{{error}}",
+        "authFailedReason": "認証失敗 - パスワードが正しくないか、認証が必要ですが提供されていません。",
+        "connectionClosedReasonCode": "コード：{{code}}{{wasClean}}",
+        "uncleanDisconnection": "（不正な切断）",
+        "connectionClosed": "OBS WebSocket接続が閉じられました。理由：{{reason}}",
+        "errorCreatingConnection": "OBS WebSocket接続の作成エラー：{{message}}",
+        "authGenerationError": "OBS認証生成エラー：{{message}}",
+        "cannotSendRequestNotConnected": "リクエスト「{{requestType}}」を送信できません：OBSに接続されていません。",
+        "errorSendingRequest": "OBSリクエスト「{{requestType}}」の送信エラー：{{message}}",
+        "requestTimeout": "OBSリクエスト「{{requestType}}」（ID：{{id}}）がタイムアウトしました。",
+        "connectionEstablishedFetchingData": "OBS接続が完全に確立されました。初期データを取得中...",
+        "errorPostConnectionSetup": "OBS接続後のセットアップ中のエラー（シーンの取得）：{{message}}",
+        "connectionClosedOrLost": "OBS接続が閉じられたか失われました。",
+        "cannotFetchScenesNotConnected": "OBSシーンを取得できません：OBSに接続されていません。",
+        "fetchingScenes": "OBSシーンを取得中...",
+        "fetchedScenesCount": "OBSから{{count}}個のシーンを取得しました。",
+        "failedToFetchScenes": "OBSシーンの取得に失敗したか、シーンが返されませんでした。",
+        "errorFetchingScenes": "OBSシーンの取得エラー：{{message}}",
+        "cannotHighlightNotConnected": "ハイライトできません：OBSに接続されていません。",
+        "highlightLayoutActiveManualLegacy": "シーン「{{sceneName}}」は新しいハイライトレイアウトを使用しています。手動ハイライトボタンの効果が限定的か、置き換えられている可能性があります。",
+        "stoppingScreenShareForHighlight": "画面共有がアクティブです（{{id}}）。ハイライト前に停止しています。",
+        "cannotScreenShareNotConnected": "画面共有を開始できません：OBSに接続されていません。",
+        "unhighlightingForScreenShare": "カメラがハイライトされています（{{id}}）。画面共有開始前にハイライトを解除しています。",
+        "cannotAddScreenShareNotConnected": "画面共有を追加できません：OBSに接続されていません。",
+        "cannotAddScreenShareNoRoom": "画面共有を追加できません：画面共有URLにはVDO.Ninjaルーム名が必要です。",
+        "cannotAddScreenShareNoReactionLayoutScene": "画面共有を追加できません：「リアクション」レイアウトで設定されたシーンがありません。",
+        "addingUpdatingScreenShareToReactionScenes": "リアクションシーンに画面共有ソース「{{sourceName}}」（URL：{{url}}）を追加/更新中。「{{primaryScene}}」でプライマリ作成。（合計{{count}}シーン）",
+        "reconfiguringExistingScreenShare": "既存の画面共有ソース「{{oldName}}」を「{{newName}}」に再設定中。",
+        "reconfiguredRenamedScreenShare": "既存の画面共有ソースを「{{sourceName}}」に再設定および名前変更しました。",
+        "screenShareExistsUpdating": "画面共有ソース「{{sourceName}}」は既に存在します。設定を更新中。",
+        "creatingNewScreenShareInScene": "シーン「{{sceneName}}」に新しい画面共有ソース「{{sourceName}}」を作成中。",
+        "ensuredTransformedScreenShareReaction": "リアクションシーン「{{sceneName}}」で画面共有ソース「{{sourceName}}」を確保および変換しました。",
+        "sourceFoundInSceneEnabled": "シーン「{{sceneName}}」でソース「{{sourceName}}」が見つかりました、アイテムID：{{itemId}}。有効になっていることを確認中。",
+        "sourceAddedToScene": "ソース「{{sourceName}}」がシーン「{{sceneName}}」に追加されました、アイテムID：{{itemId}}。",
+        "errorCreatingSceneItem": "「{{sceneName}}」で「{{sourceName}}」のシーンアイテム作成エラー：{{message}}",
+        "errorCheckingSceneForItem": "シーン「{{sceneName}}」で「{{sourceName}}」をチェック中のエラー：{{message}}",
+        "errorApplyingInitialTransform": "「{{sceneName}}」で「{{sourceName}}」に初期デフォルト変換を適用中のエラー：{{message}}",
+        "successConfigScreenShare": "ストリーム{{streamId}}（{{label}}）の画面共有が正常に設定されました。",
+        "errorAddingUpdatingScreenShare": "画面共有ソース「{{sourceName}}」の追加/更新エラー：{{message}}。",
+        "cannotToggleHighlightNotConnected": "ハイライトを切り替えできません：OBSに接続されていません。",
+        "streamUnhighlighted": "ストリーム{{id}}のハイライトが解除されました（{{oldName}}から{{newName}}に名前変更）。",
+        "streamSuccessfullyUnhighlighted": "ストリーム{{id}}のハイライトが正常に解除されました（{{newName}}に名前変更）。",
+        "streamSuccessfullyHighlighted": "ストリーム{{id}}が正常にハイライトされました（{{newName}}に名前変更）。",
+        "unhighlightError": "{{sourceName}}のハイライト解除（名前変更）ができませんでした。存在しないか別のエラー：{{message}}",
+        "highlightError": "{{sourceName}}のハイライト（名前変更）ができませんでした。存在しないか別のエラー：{{message}}",
+        "legacyHighlightUnhighlightOnRemove": "ストリーム{{id}}はレガシーハイライトされていました。ハイライトを解除しています。",
+        "cannotAddStreamNotConnected": "ストリーム「{{label}}」（{{id}}）をOBSに追加できません：OBSに接続されていません。",
+        "cannotAddStreamNoTargetSceneName": "ストリーム「{{label}}」（{{id}}）を追加できません：ターゲットOBSシーン名が必要ですが設定されていません（デフォルトもマッピングもありません）。",
+        "foundExistingStandardSource": "ストリーム{{streamId}}の既存の標準ソース「{{sourceName}}」が見つかりました。",
+        "foundExistingHighlightForConnectingStream": "接続中のストリーム{{streamId}}のハイライト命名に一致する既存のOBSソース「{{sourceName}}」が見つかりました。内部ハイライト状態を更新中。",
+        "foundExistingHighlightedSource": "ストリーム{{streamId}}の既存のハイライトされたソース「{{sourceName}}」が見つかりました。",
+        "noExistingSourceFoundWillCreate": "ストリーム{{streamId}}の標準（「{{baseSourceName}}」）もハイライト（「{{highlightedSourceName}}」）ソースも見つかりません。新規作成します。",
+        "noExistingStandardSourceSamePrefix": "ストリーム{{streamId}}の標準ソース「{{sourceName}}」が見つかりません（ハイライトプレフィックスは同じ）。新規作成します。",
+        "errorGettingCanvasSize": "OBSキャンバスサイズの取得エラー：{{message}}。デフォルト{{width}}x{{height}}を使用します。",
+        "sourceNotGlobalCreating": "ソース「{{sourceName}}」はグローバルに存在しません。シーン「{{sceneName}}」に作成中。",
+        "sourceCreatedAddedToScene": "ソース「{{sourceName}}」が作成され、シーン「{{sceneName}}」に追加されました。",
+        "sourceGlobalUpdatingWithUrl": "ソース「{{sourceName}}」は既にグローバルに存在します。設定を更新中。URL：{{url}}",
+        "sourceFoundAsItemInScene": "ソース「{{sourceName}}」がシーン「{{sceneName}}」のアイテムとして見つかりました。",
+        "sourceNotInSceneAdding": "ソース「{{sourceName}}」がシーン「{{sceneName}}」にありません。追加中。",
+        "cloningToMainScene": "マッピングルールにより、ソース「{{sourceName}}」をメインシーン（チェックボックスから）「{{sceneName}}」にクローン中。",
+        "addingSourceToOtherScene": "ソース「{{sourceName}}」を他の選択されたシーン「{{sceneName}}」にアイテムとして追加中。",
+        "switchingProgramScene": "OBS現在のプログラムシーンを「{{sceneName}}」に切り替え中。",
+        "successfullyProcessedStream": "ストリーム「{{label}}」（{{id}}）が正常に処理されました、有効なOBSソース：「{{sourceName}}」。",
+        "errorManagingStream": "OBSでストリーム「{{sourceName}}」（「{{label}}」）の管理エラー：{{message}}",
+        "applyTransformAndGridCalled": "{{sceneName}}で{{sourceName}}のapplyTransformAndGridが呼び出されました。シーンの完全なレイアウト更新をトリガー中。",
+        "triggeringLayoutUpdate": "シーン「{{sceneName}}」のレイアウト更新をトリガー中...",
+        "gridFallbackSourceChanged": "「{{sourceGridScene}}」（プライマリフォールバック候補）のグリッド設定が変更されました。リアクション/ハイライトシーン「{{dependentScene}}」の更新をトリガー中。",
+        "noSceneItemsForLayout": "シーン「{{sceneName}}」でレイアウト更新用のシーンアイテムが見つかりません。",
+        "applyingConfiguredLayout": "シーン「{{sceneName}}」に「{{layoutType}}」レイアウトを適用中。（{{count}}アイテム）",
+        "unknownLayoutType": "シーン「{{sceneName}}」の不明なレイアウトタイプ「{{layoutType}}」。デフォルトサイズを適用中。",
+        "noSpecificLayoutApplyingDefault": "シーン「{{sceneName}}」に特定のレイアウトがありません。デフォルトソースサイズ（「{{sizing}}」）を適用中。",
+        "errorTriggeringLayoutUpdate": "シーン「{{sceneName}}」のレイアウト更新中のエラー：{{message}}",
+        "applyingDefaultSizing": "シーン「{{sceneName}}」の{{count}}アイテムにデフォルトソースサイズ（「{{sizing}}」）を適用中。",
+        "errorApplyingDefaultTransformItem": "{{sceneName}}で{{sourceName}}にデフォルト変換を適用中のエラー：{{message}}",
+        "noSourcesForGridLayout": "シーン「{{sceneName}}」でグリッドレイアウトを適用するVDO.Ninjaカメラソースがありません。",
+        "applyingGridLayoutScene": "シーン「{{sceneName}}」の{{count}}個のVDO.Ninjaカメラソースにグリッドレイアウトを適用中。",
+        "applyingGridSplitScreen": "シーン「{{sceneName}}」に2カメラ分割画面グリッドレイアウトを適用中。",
+        "reactionMainNotFoundFallbackGrid": "シーン「{{sceneName}}」のリアクションレイアウトのメインコンテンツが見つからない/表示されていません。フォールバックカメラグリッドを適用中。",
+        "highlightMainNotFoundFallbackGrid": "シーン「{{sceneName}}」のハイライトレイアウトのメインコンテンツが見つからない/表示されていません。フォールバックカメラグリッドを適用中。",
+        "usingGridSceneFallbackSettings": "「{{targetScene}}」のフォールバックとして、最初に設定された「グリッド」レイアウトシーン（「{{sceneName}}」）のグリッド設定を使用中。",
+        "usingDefaultGridFallbackSettings": "「グリッド」レイアウトシーンが見つかりません。「{{targetScene}}」のフォールバックとしてデフォルトグリッド設定を使用中。",
+        "applyingFallbackGridToCameras": "シーン「{{sceneName}}」の{{count}}個のカメラソースにフォールバックグリッドレイアウトを適用中。",
+        "noCamerasForFallbackGridHidingAll": "シーン「{{sceneName}}」のフォールバックグリッドに表示するカメラアイテムがありません。このシーンのすべてのVDOソースが非表示になります。",
+        "cannotRemoveStreamNotConnected": "ストリーム{{id}}をOBSから削除できません：OBSに接続されていません。",
+        "triggeredRemoval": "ユーザーまたは自動でストリーム「{{id}}」のOBSからの削除がトリガーされました。ベースソース：「{{baseName}}」。",
+        "streamScreenSharingRemoving": "ストリーム{{id}}は画面共有をアクティブにしていました。画面共有の削除を開始中。",
+        "finishedRemovingSourceItems": "指定されたOBSシーンからストリーム{{id}}のソースアイテムの削除が完了しました。",
+        "cannotRemoveScreenShareNotConnected": "画面共有を削除できません：OBSに接続されていません。",
+        "attemptingRemoveScreenShareSource": "画面共有ソース「{{sourceName}}」をOBSから完全に削除しようとしています（すべてのシーンと入力）。",
+        "removingGlobalInput": "グローバル入力「{{sourceName}}」をOBSから削除中。",
+        "successfullyRemovedInput": "入力「{{sourceName}}」が正常に削除されました。",
+        "errorScreenShareRemovalProcess": "「{{sourceName}}」の画面共有削除プロセス中のエラー：{{message}}",
+        "removingSourceItemFromScene": "シーン「{{sceneName}}」からソースアイテム「{{sourceName}}」（ID：{{itemId}}）を削除中。",
+        "errorTryingRemoveSourceItem": "シーン「{{sceneName}}」からソースアイテム「{{sourceName}}」を削除しようとした際のエラー：{{message}}",
+        "codecChangedUpdatingSources": "コーデックが{{codec}}に変更されました。OBSソースを更新中...",
+        "codecChangedNotConnected": "OBSが接続されていません。再接続と新しいアクションまで、ソースは新しいコーデックで更新されません。",
+        "sourceUpdatedWithUrlAndCss": "ソース「{{sourceName}}」がURL：{{url}}とカスタムCSSで更新されました。",
+        "screenShareSourceUpdatedWithUrlAndCss": "画面共有ソース「{{sourceName}}」がURL：{{url}}とカスタムCSSで更新されました。",
+        "codecUpdateComplete": "OBSソースのコーデック更新が完了しました。",
+        "codecCssUpdateComplete": "OBSソースのコーデック/CSS更新が完了しました。",
+        "inputNameChanged": "OBSイベント：入力名が「{{oldName}}」から「{{newName}}」に変更されました。関連シーンのレイアウト更新を確認中。",
+        "foundPreExistingHighlight": "OBSに既存のハイライトされたソースが見つかりました：「{{sourceName}}」。アクティブハイライトをストリームID：{{streamId}}に設定中。",
+        "errorCheckingMainContentEnabled": "メインコンテンツ{{sourceName}}が有効かどうかの確認エラー：{{message}}"
+    }
+  }
+}
\ No newline at end of file
diff --git a/obs/locales/ko.json b/obs/locales/ko.json
new file mode 100644
index 0000000..b6c5d7b
--- /dev/null
+++ b/obs/locales/ko.json
@@ -0,0 +1,312 @@
+{
+  "pageTitle": "VDO.Ninja OBS 컨트롤 독",
+  "mainHeading": "VDO.Ninja OBS 컨트롤",
+  "languageSwitcher": {
+    "label": "언어:"
+  },
+  "collapsible": {
+    "clickToExpand": "클릭하여 펼치기",
+    "clickToCollapse": "클릭하여 접기"
+  },
+  "customCss": {
+    "title": "사용자 정의 CSS",
+    "label": "사용자 정의 CSS를 여기에 입력하세요:",
+    "description": "이 CSS는 소스에 적용됩니다."
+  },
+  "obsConnection": {
+    "title": "OBS WebSocket 연결",
+    "websocketUrlLabel": "WebSocket URL:",
+    "passwordLabel": "비밀번호:",
+    "cameraPrefixLabel": "일반 카메라 접두사:",
+    "reactionPrefixLabel": "리액션 접두사: VDO.",
+    "highlightPrefixLabel": "하이라이트 접두사: VDO.",
+    "reactionPrefixDynamicLabel": "리액션 접두사: {{prefix}}{{separator}}{{subPrefix}}",
+    "highlightPrefixDynamicLabel": "하이라이트 접두사: {{prefix}}{{separator}}{{subPrefix}}",
+    "connectButton": "연결",
+    "disconnectButton": "연결 해제",
+    "statusDisconnected": "상태: 연결 해제됨",
+    "statusConnected": "상태: 연결됨",
+    "statusConnecting": "상태: 연결 중...",
+    "statusError": "상태: 오류",
+    "statusErrorUrlMissing": "상태: 오류 - URL 누락",
+    "statusErrorTimeout": "상태: 오류 - 연결 시간 초과",
+    "statusErrorCameraPrefixMissing": "상태: 오류 - 카메라 접두사 누락"
+  },
+  "vdoNinjaSettings": {
+    "title": "VDO.Ninja 설정",
+    "baseUrlLabel": "VDO.Ninja 기본 URL:",
+    "baseUrlPlaceholder": "https://vdo.ninja",
+    "roomNameLabel": "방 이름:",
+    "roomNamePlaceholder": "예: MyNinjaRoom",
+    "passwordLabel": "비밀번호:",
+    "passwordPlaceholder": "방 또는 &password",
+    "streamIdsLabel": "스트림 ID:",
+    "streamIdsPlaceholder": "streamId1,streamId2",
+    "roomOrStreamIdsNeeded": "방 이름 또는 스트림 ID가 필요합니다",
+    "connectButton": "연결",
+    "disconnectButton": "연결 해제",
+    "cancelButton": "취소",
+    "statusDisconnected": "상태: 연결 해제됨",
+    "statusConnected": "상태: 연결됨",
+    "statusConnecting": "상태: 연결 중...",
+    "statusConnectionFailed": "상태: 연결 실패",
+    "statusConnectionLost": "상태: 연결 끊김"
+  },
+  "streamIdMappings": {
+    "title": "스트림 ID 매핑",
+    "addNewMappingButton": "새 매핑 추가",
+    "ruleTitle": "스트림 매핑 규칙",
+    "streamIdPlaceholder": "스트림 ID",
+    "streamIdTooltip": "VDO.Ninja 스트림 ID",
+    "labelPlaceholder": "레이블 (선택사항)",
+    "labelTooltip": "VDO.Ninja 스트림 레이블",
+    "matchTypeTooltip": "스트림 일치 방법",
+    "matchType": {
+        "idOnly": "ID만",
+        "labelOnly": "레이블만",
+        "bothRequired": "둘 다 필요",
+        "eitherMatch": "둘 중 하나 일치"
+    },
+    "targetSceneTooltip": "대상 OBS 씬",
+    "selectSceneOption": "씬을 선택하세요...",
+    "removeRuleTooltip": "이 매핑 규칙 제거",
+    "cloneToMainSceneLabel": "메인 씬에 복제",
+    "switchToSceneOnAddLabel": "추가 시 씬으로 전환",
+    "ruleDescription": "들어오는 스트림이 OBS 씬으로 라우팅되는 방법을 정의합니다."
+  },
+  "obsTargetSettings": {
+    "title": "OBS 대상 설정",
+    "sourceCreationScenesLabel": "소스 생성용 씬:",
+    "sourceCreationScenesDesc": "하나 이상의 씬을 선택하세요. 첫 번째는 기본이고, 나머지는 복사용입니다.",
+    "loadingScenes": "씬 로딩 중...",
+    "noScenesFound": "씬을 찾을 수 없습니다",
+    "refetchScenesButton": "씬 다시 가져오기",
+    "screenShareSettings": {
+        "title": "화면 공유 설정:",
+        "widthLabel": "너비:",
+        "heightLabel": "높이:",
+        "resolutionNote": "이 해상도는 '리액션' 레이아웃이 있는 씬의 화면 공유 소스에 사용됩니다."
+    },
+    "autoAddSourcesLabel": "새 스트림을 소스로 자동 추가",
+    "autoRemoveSourcesLabel": "연결 해제 시 소스 자동 제거",
+    "newSourceSizing": {
+        "label": "기본 소스 크기:",
+        "defaultSizeOption": "기본 (1920x1080 위치 0,0)",
+        "bestFitOption": "최적 맞춤 (종횡비 유지)",
+        "stretchToFillOption": "화면에 맞게 늘리기",
+        "overrideNote": "\"레이아웃\" 섹션에 정의된 특정 레이아웃이 해당 씬에 대해 이를 재정의합니다."
+    },
+    "codec": {
+        "label": "코덱:",
+        "noneOption": "없음",
+        "learnMoreTitle": "코덱 옵션에 대해 자세히 알아보기"
+    }
+  },
+  "sceneLayouts": {
+    "title": "씬 레이아웃",
+    "addNewLayoutButton": "새 레이아웃 추가",
+    "description": "특정 OBS 씬에 대한 자동 레이아웃을 정의합니다. 이는 구성된 씬의 기본 소스 크기를 재정의합니다.",
+    "sceneLabel": "씬:",
+    "selectSceneOption": "씬 선택...",
+    "layoutLabel": "레이아웃:",
+    "selectLayoutOption": "레이아웃 선택...",
+    "layoutTypes": {
+        "grid": "그리드",
+        "reaction": "리액션",
+        "highlight": "하이라이트"
+    },
+    "noActiveLayouts": "활성 레이아웃 없음",
+    "removeLayoutTooltip": "이 레이아웃 구성 제거",
+    "sceneAlreadyConfiguredTooltip": "(이미 사용 중)",
+    "sceneAlreadyConfiguredAlert": "'{{sceneName}}' 씬이 이미 다른 레이아웃 구성에서 사용 중입니다.",
+    "controls": {
+        "margin": "여백",
+        "spacing": "간격",
+        "offsetX": "X 오프셋",
+        "offsetY": "Y 오프셋",
+        "gridSplitScreenTwoCameras": "2개 카메라 분할 화면 (그리드)",
+        "distributeCameras": "카메라 배포 (리액션/하이라이트)"
+    }
+  },
+  "activeStreams": {
+    "title": "활성 스트림",
+    "noActiveStreams": "활성 스트림 없음",
+    "streamIdLabel": "ID: {{id}}",
+    "labelLabel": "레이블: {{label}}",
+    "targetSceneLabelText": "대상 씬: {{sceneName}}",
+    "notSet": "설정 안 됨",
+    "defaultSceneTag": "기본",
+    "mappedSceneTag": "매핑됨",
+    "addedToObs": "✓ OBS에 추가됨",
+    "notInObs": "✗ OBS에 없음",
+    "buttons": {
+        "addToObs": "OBS에 추가",
+        "removeFromObs": "OBS에서 제거",
+        "highlight": "하이라이트",
+        "unhighlight": "하이라이트 해제",
+        "screenShare": "화면 공유",
+        "stopScreenShare": "화면 공유 중지"
+    }
+  },
+  "log": {
+    "title": "로그"
+  },
+  "vdoNinja": {
+    "defaultStreamLabel": "스트림 {{id}}"
+  },
+  "logMessages": {
+    "settingsSaved": "설정이 저장되었습니다.",
+    "settingsLoaded": "localStorage에서 설정을 불러왔습니다.",
+    "customCssChangedWillApplyToSource": "사용자 정의 CSS 입력이 변경되었습니다. 다음 생성/업데이트 시 OBS 소스 설정에 직접 적용됩니다.",
+    "errorLoadingSettings": "localStorage에서 설정 로딩 오류: {{message}}. 기본값을 사용합니다.",
+    "noSavedSettings": "저장된 설정이 없습니다. 기본값을 사용합니다.",
+    "appInitialized": "VDO.Ninja OBS 컨트롤 독이 초기화되었습니다. 환영합니다!",
+    "jsShaLoaded": "jsSHA 라이브러리가 성공적으로 로드되었습니다 (Web Crypto 대체).",
+    "errorLoadingJsSha": "오류: jsSHA 라이브러리 로드 실패. Web Crypto도 사용할 수 없는 경우 OBS 인증이 실패할 수 있습니다.",
+    "loadedStreamMappings": "{{count}}개의 스트림 매핑을 로드했습니다.",
+    "errorLoadingStreamMappings": "localStorage에서 스트림 매핑 로딩 오류: {{message}}",
+    "warningStreamMappingElementsNotFound": "경고: 스트림 매핑 UI div에서 예상된 모든 요소를 찾을 수 없습니다.",
+    "loadedLayoutConfigs": "{{count}}개의 씬 레이아웃 구성을 로드했습니다.",
+    "errorLoadingLayoutConfigs": "씬 레이아웃 구성 로딩 오류: {{message}}",
+    "savedLayoutConfigs": "{{count}}개의 씬 레이아웃 구성을 저장했습니다.",
+    "errorSavingLayoutsDuplicateScene": "레이아웃 저장 오류: '{{sceneName}}' 씬이 여러 번 구성되었습니다. 각 씬은 하나의 레이아웃만 가져야 합니다.",
+    "layoutSceneNotFound": "레이아웃용으로 저장된 '{{sceneName}}' 씬이 현재 OBS 씬에서 발견되지 않았습니다.",
+    "errorHidingSource": "{{sceneName}}에서 소스 항목 {{sourceName}} 숨기기 오류: {{message}}",
+    "sceneAlreadyConfiguredError": "'{{sceneName}}' 씬이 이미 다른 레이아웃에 구성되어 있습니다. 선택을 되돌립니다.",
+    "vdoNinja": {
+        "disconnected": "VDO.Ninja 연결이 해제되었습니다.",
+        "alreadyConnected": "이미 VDO.Ninja에 연결되어 있습니다.",
+        "errorRoomOrStreamIdNeeded": "VDO.Ninja 오류: 방 이름 또는 스트림 ID를 제공해야 합니다.",
+        "connectionTimeout": "VDO.Ninja 연결 시간이 초과되었습니다. iframe에서 활동이 수신되지 않았습니다.",
+        "roomOrStreamIdNeededForConnect": "VDO.Ninja: 연결하려면 방 이름 또는 특정 스트림 ID를 제공해야 합니다.",
+        "streamIdsEmptyAfterTrim": "VDO.Ninja: 스트림 ID가 제공되었지만 트리밍 후 비어 있습니다.",
+        "initializingIframe": "URL로 VDO.Ninja iframe 초기화 중: {{url}}",
+        "invalidBaseUrl": "설정의 잘못된 VDO.Ninja 기본 URL: {{url}}",
+        "iframeConnectedActive": "VDO.Ninja iframe 연결이 설정되고 활성화되었습니다.",
+        "streamConnectedActive": "VDO.Ninja 스트림 연결/활성: \"{{label}}\" (ID: {{id}})",
+        "autoAddingStream": "스트림 {{id}}을(를) OBS에 자동 추가 중.",
+        "streamDisconnectedInactive": "VDO.Ninja 스트림 연결 해제/비활성: \"{{label}}\" (ID: {{id}})",
+        "autoRemovingStream": "스트림 {{id}}을(를) OBS에서 자동 제거 중.",
+        "streamLabelUpdated": "ID {{id}}에 대한 VDO.Ninja 스트림 레이블 업데이트: \"{{newLabel}}\" (이전: \"{{oldLabel}}\")",
+        "connectionLostResetting": "VDO.Ninja 연결 끊김 (iframe에서 활동 없음). 재설정을 시도합니다."
+    },
+    "obs": {
+        "disconnecting": "OBS WebSocket 연결 해제 중...",
+        "errorCameraPrefixRequired": "오류: OBS 연결에는 일반 카메라 접두사가 필요합니다.",
+        "errorUrlRequired": "오류: OBS WebSocket URL이 필요합니다.",
+        "attemptingConnection": "{{url}}에서 OBS WebSocket 연결 시도 중...",
+        "connectionTimeout": "OBS WebSocket 연결 시도가 시간 초과되었습니다.",
+        "connectionOpenedWaitingHello": "OBS WebSocket 연결이 열렸습니다. 서버 Hello를 기다리는 중...",
+        "receivedHelloSendingIdentify": "OBS에서 Hello를 받았습니다. Identify를 보내는 중...",
+        "authDataPrepared": "Identify 메시지에 대한 인증 데이터가 준비되었습니다.",
+        "warningAuthRequiredNoPassword": "경고: OBS 서버에 인증이 필요하지만 비밀번호가 제공되지 않았습니다.",
+        "authSuccessConnected": "OBS WebSocket 인증 성공! 연결이 설정되었습니다.",
+        "requestError": "OBS 요청 오류 (유형: {{type}}, ID: {{id}}): {{error}} (코드: {{code}})",
+        "eventSceneListChanged": "OBS 이벤트: 씬 목록이 변경되었습니다. 씬을 다시 가져오는 중.",
+        "errorProcessingMessage": "OBS WebSocket 메시지 처리 오류: {{message}}. 데이터: {{data}}",
+        "webSocketError": "OBS WebSocket 오류: {{error}}",
+        "authFailedReason": "인증 실패 - 잘못된 비밀번호 또는 인증이 필요하지만 제공되지 않았습니다.",
+        "connectionClosedReasonCode": "코드: {{code}}{{wasClean}}",
+        "uncleanDisconnection": " (비정상 연결 해제)",
+        "connectionClosed": "OBS WebSocket 연결이 닫혔습니다. 이유: {{reason}}",
+        "errorCreatingConnection": "OBS WebSocket 연결 생성 오류: {{message}}",
+        "authGenerationError": "OBS 인증 생성 오류: {{message}}",
+        "cannotSendRequestNotConnected": "'{{requestType}}' 요청을 보낼 수 없음: OBS에 연결되지 않음.",
+        "errorSendingRequest": "OBS 요청 '{{requestType}}' 전송 오류: {{message}}",
+        "requestTimeout": "OBS 요청 '{{requestType}}' (ID: {{id}}) 시간 초과.",
+        "connectionEstablishedFetchingData": "OBS 연결이 완전히 설정되었습니다. 초기 데이터를 가져오는 중...",
+        "errorPostConnectionSetup": "OBS 연결 후 설정 중 오류 (씬 가져오기): {{message}}",
+        "connectionClosedOrLost": "OBS 연결이 닫히거나 끊어졌습니다.",
+        "cannotFetchScenesNotConnected": "OBS 씬을 가져올 수 없음: OBS에 연결되지 않음.",
+        "fetchingScenes": "OBS 씬을 가져오는 중...",
+        "fetchedScenesCount": "OBS에서 {{count}}개의 씬을 가져왔습니다.",
+        "failedToFetchScenes": "OBS 씬을 가져오지 못했거나 반환된 씬이 없습니다.",
+        "errorFetchingScenes": "OBS 씬 가져오기 오류: {{message}}",
+        "cannotHighlightNotConnected": "하이라이트할 수 없음: OBS에 연결되지 않음.",
+        "highlightLayoutActiveManualLegacy": "'{{sceneName}}' 씬이 새로운 하이라이트 레이아웃을 사용합니다. 수동 하이라이트 버튼은 제한적인 효과를 가지거나 대체될 수 있습니다.",
+        "stoppingScreenShareForHighlight": "화면 공유가 활성화되어 있습니다 ({{id}}). 하이라이트하기 전에 중지합니다.",
+        "cannotScreenShareNotConnected": "화면 공유를 시작할 수 없음: OBS에 연결되지 않음.",
+        "unhighlightingForScreenShare": "카메라가 하이라이트되어 있습니다 ({{id}}). 화면 공유를 시작하기 전에 하이라이트를 해제합니다.",
+        "cannotAddScreenShareNotConnected": "화면 공유를 추가할 수 없음: OBS에 연결되지 않음.",
+        "cannotAddScreenShareNoRoom": "화면 공유를 추가할 수 없음: 화면 공유 URL에는 VDO.Ninja 방 이름이 필요합니다.",
+        "cannotAddScreenShareNoReactionLayoutScene": "화면 공유를 추가할 수 없음: '리액션' 레이아웃으로 구성된 씬이 없습니다.",
+        "addingUpdatingScreenShareToReactionScenes": "리액션 씬에 화면 공유 소스 '{{sourceName}}' (URL: {{url}})을(를) 추가/업데이트 중. '{{primaryScene}}'에서 기본 생성. (총 {{count}}개 씬)",
+        "reconfiguringExistingScreenShare": "기존 화면 공유 소스 '{{oldName}}'을(를) '{{newName}}'(으)로 재구성 중.",
+        "reconfiguredRenamedScreenShare": "기존 화면 공유 소스를 '{{sourceName}}'(으)로 재구성하고 이름을 변경했습니다.",
+        "screenShareExistsUpdating": "화면 공유 소스 '{{sourceName}}'이(가) 이미 존재합니다. 설정을 업데이트합니다.",
+        "creatingNewScreenShareInScene": "'{{sceneName}}' 씬에 새 화면 공유 소스 '{{sourceName}}'을(를) 생성 중.",
+        "ensuredTransformedScreenShareReaction": "리액션 씬 '{{sceneName}}'에서 화면 공유 소스 '{{sourceName}}'을(를) 확인하고 변환했습니다.",
+        "sourceFoundInSceneEnabled": "'{{sceneName}}' 씬에서 소스 '{{sourceName}}'을(를) 찾았습니다, 항목 ID: {{itemId}}. 활성화되었는지 확인합니다.",
+        "sourceAddedToScene": "'{{sceneName}}' 씬에 소스 '{{sourceName}}'이(가) 추가되었습니다, 항목 ID: {{itemId}}.",
+        "errorCreatingSceneItem": "'{{sceneName}}'에서 '{{sourceName}}'에 대한 씬 항목 생성 오류: {{message}}",
+        "errorCheckingSceneForItem": "'{{sceneName}}'에서 '{{sourceName}}' 확인 오류: {{message}}",
+        "errorApplyingInitialTransform": "'{{sceneName}}'에서 '{{sourceName}}'에 초기 기본 변환 적용 오류: {{message}}",
+        "successConfigScreenShare": "스트림 {{streamId}} ({{label}})에 대한 화면 공유를 성공적으로 구성했습니다.",
+        "errorAddingUpdatingScreenShare": "화면 공유 소스 '{{sourceName}}' 추가/업데이트 오류: {{message}}.",
+        "cannotToggleHighlightNotConnected": "하이라이트를 토글할 수 없음: OBS에 연결되지 않음.",
+        "streamUnhighlighted": "스트림 {{id}} 하이라이트 해제됨 ({{oldName}}에서 {{newName}}(으)로 이름 변경)",
+        "streamSuccessfullyUnhighlighted": "스트림 {{id}}이(가) 성공적으로 하이라이트 해제됨 ({{newName}}(으)로 이름 변경)",
+        "streamSuccessfullyHighlighted": "스트림 {{id}}이(가) 성공적으로 하이라이트됨 ({{newName}}(으)로 이름 변경)",
+        "unhighlightError": "{{sourceName}}을(를) 하이라이트 해제(이름 변경)할 수 없음, 존재하지 않거나 다른 오류: {{message}}",
+        "highlightError": "{{sourceName}}을(를) 하이라이트(이름 변경)할 수 없음, 존재하지 않거나 다른 오류: {{message}}",
+        "legacyHighlightUnhighlightOnRemove": "스트림 {{id}}이(가) 레거시 하이라이트되었습니다. 하이라이트를 해제합니다.",
+        "cannotAddStreamNotConnected": "스트림 \"{{label}}\" ({{id}})을(를) OBS에 추가할 수 없음: OBS에 연결되지 않음.",
+        "cannotAddStreamNoTargetSceneName": "스트림 \"{{label}}\" ({{id}})을(를) 추가할 수 없음: 대상 OBS 씬 이름이 필요하지만 설정되지 않음 (기본값 없음 및 매핑 없음).",
+        "foundExistingStandardSource": "스트림 {{streamId}}에 대한 기존 표준 소스 '{{sourceName}}'을(를) 찾았습니다.",
+        "foundExistingHighlightForConnectingStream": "연결 중인 스트림 {{streamId}}에 대한 하이라이트 명명과 일치하는 기존 OBS 소스 '{{sourceName}}'을(를) 찾았습니다. 내부 하이라이트 상태를 업데이트합니다.",
+        "foundExistingHighlightedSource": "스트림 {{streamId}}에 대한 기존 하이라이트된 소스 '{{sourceName}}'을(를) 찾았습니다.",
+        "noExistingSourceFoundWillCreate": "스트림 {{streamId}}에 대한 표준 ('{{baseSourceName}}') 또는 하이라이트된 ('{{highlightedSourceName}}') 소스를 찾을 수 없습니다. 새로 생성합니다.",
+        "noExistingStandardSourceSamePrefix": "스트림 {{streamId}}에 대한 표준 소스 '{{sourceName}}'을(를) 찾을 수 없음 (하이라이트 접두사가 동일). 새로 생성합니다.",
+        "errorGettingCanvasSize": "OBS 캔버스 크기 가져오기 오류: {{message}}. 기본값 {{width}}x{{height}}을(를) 사용합니다.",
+        "sourceNotGlobalCreating": "소스 '{{sourceName}}'이(가) 전역적으로 존재하지 않습니다. '{{sceneName}}' 씬에 생성 중.",
+        "sourceCreatedAddedToScene": "소스 '{{sourceName}}'이(가) 생성되고 '{{sceneName}}' 씬에 추가되었습니다.",
+        "sourceGlobalUpdatingWithUrl": "소스 '{{sourceName}}'이(가) 이미 전역적으로 존재합니다. 설정을 업데이트합니다. URL: {{url}}",
+        "sourceFoundAsItemInScene": "'{{sceneName}}' 씬에서 소스 '{{sourceName}}'을(를) 항목으로 찾았습니다.",
+        "sourceNotInSceneAdding": "소스 '{{sourceName}}'이(가) '{{sceneName}}' 씬에 없습니다. 추가 중.",
+        "cloningToMainScene": "매핑 규칙으로 인해 소스 '{{sourceName}}'을(를) 메인 씬 (체크박스에서) '{{sceneName}}'(으)로 복제 중.",
+        "addingSourceToOtherScene": "소스 '{{sourceName}}'을(를) 다른 선택된 씬 '{{sceneName}}'에 항목으로 추가 중.",
+        "switchingProgramScene": "OBS 현재 프로그램 씬을 '{{sceneName}}'(으)로 전환 중.",
+        "successfullyProcessedStream": "스트림 \"{{label}}\" ({{id}})을(를) 성공적으로 처리함, 유효한 OBS 소스: '{{sourceName}}'.",
+        "errorManagingStream": "OBS에서 스트림 '{{sourceName}}' (\"{{label}}\") 관리 오류: {{message}}",
+        "applyTransformAndGridCalled": "{{sceneName}}에서 {{sourceName}}에 대해 applyTransformAndGrid가 호출됨. 씬에 대한 전체 레이아웃 업데이트를 트리거합니다.",
+        "triggeringLayoutUpdate": "'{{sceneName}}' 씬에 대한 레이아웃 업데이트를 트리거 중...",
+        "gridFallbackSourceChanged": "'{{sourceGridScene}}' (기본 대체 후보)에 대한 그리드 설정이 변경됨. 리액션/하이라이트 씬 '{{dependentScene}}'에 대한 업데이트를 트리거합니다.",
+        "noSceneItemsForLayout": "'{{sceneName}}' 씬에서 레이아웃 업데이트를 위한 씬 항목을 찾을 수 없습니다.",
+        "applyingConfiguredLayout": "'{{sceneName}}' 씬에 '{{layoutType}}' 레이아웃을 적용 중. ({{count}}개 항목)",
+        "unknownLayoutType": "'{{sceneName}}' 씬에 대한 알 수 없는 레이아웃 유형 '{{layoutType}}'. 기본 크기를 적용합니다.",
+        "noSpecificLayoutApplyingDefault": "'{{sceneName}}' 씬에 대한 특정 레이아웃 없음. 기본 소스 크기 ('{{sizing}}')를 적용합니다.",
+        "errorTriggeringLayoutUpdate": "'{{sceneName}}' 씬에 대한 레이아웃 업데이트 중 오류: {{message}}",
+        "applyingDefaultSizing": "'{{sceneName}}' 씬의 {{count}}개 항목에 기본 소스 크기 ('{{sizing}}')를 적용 중.",
+        "errorApplyingDefaultTransformItem": "{{sceneName}}에서 {{sourceName}}에 기본 변환 적용 오류: {{message}}",
+        "noSourcesForGridLayout": "'{{sceneName}}' 씬에 그리드 레이아웃을 적용할 VDO.Ninja 카메라 소스가 없습니다.",
+        "applyingGridLayoutScene": "'{{sceneName}}' 씬에서 {{count}}개의 VDO.Ninja 카메라 소스에 그리드 레이아웃을 적용 중.",
+        "applyingGridSplitScreen": "'{{sceneName}}' 씬에 2-카메라 분할 화면 그리드 레이아웃을 적용 중.",
+        "reactionMainNotFoundFallbackGrid": "'{{sceneName}}' 씬에서 리액션 레이아웃에 대한 메인 콘텐츠를 찾을 수 없음/표시되지 않음. 카메라의 대체 그리드를 적용합니다.",
+        "highlightMainNotFoundFallbackGrid": "'{{sceneName}}' 씬에서 하이라이트 레이아웃에 대한 메인 콘텐츠를 찾을 수 없음/표시되지 않음. 카메라의 대체 그리드를 적용합니다.",
+        "usingGridSceneFallbackSettings": "'{{targetScene}}'에 대한 대체로 첫 번째 구성된 '그리드' 레이아웃 씬 ('{{sceneName}}')의 그리드 설정을 사용합니다.",
+        "usingDefaultGridFallbackSettings": "'그리드' 레이아웃 씬을 찾을 수 없습니다. '{{targetScene}}'에 대한 대체로 기본 그리드 설정을 사용합니다.",
+        "applyingFallbackGridToCameras": "'{{sceneName}}' 씬에서 {{count}}개의 카메라 소스에 대체 그리드 레이아웃을 적용 중.",
+        "noCamerasForFallbackGridHidingAll": "'{{sceneName}}' 씬에서 대체 그리드에 표시할 카메라 항목이 없습니다. 이 씬의 모든 VDO 소스가 숨겨집니다.",
+        "cannotRemoveStreamNotConnected": "OBS에서 스트림 {{id}}을(를) 제거할 수 없음: OBS에 연결되지 않음.",
+        "triggeredRemoval": "OBS에서 스트림 '{{id}}'의 사용자 또는 자동 트리거 제거. 기본 소스: '{{baseName}}'.",
+        "streamScreenSharingRemoving": "스트림 {{id}}이(가) 활발하게 화면을 공유하고 있었습니다. 화면 공유 제거를 시작합니다.",
+        "finishedRemovingSourceItems": "지정된 OBS 씬에서 스트림 {{id}}에 대한 소스 항목 제거를 완료했습니다.",
+        "cannotRemoveScreenShareNotConnected": "화면 공유를 제거할 수 없음: OBS에 연결되지 않음.",
+        "attemptingRemoveScreenShareSource": "OBS에서 화면 공유 소스 '{{sourceName}}'을(를) 완전히 제거하려고 시도 중 (모든 씬과 입력).",
+        "removingGlobalInput": "OBS에서 전역 입력 '{{sourceName}}'을(를) 제거 중.",
+        "successfullyRemovedInput": "입력 '{{sourceName}}'을(를) 성공적으로 제거했습니다.",
+        "errorScreenShareRemovalProcess": "'{{sourceName}}'에 대한 화면 공유 제거 프로세스 중 오류: {{message}}",
+        "removingSourceItemFromScene": "'{{sceneName}}' 씬에서 소스 항목 '{{sourceName}}' (ID: {{itemId})을(를) 제거 중.",
+        "errorTryingRemoveSourceItem": "'{{sceneName}}' 씬에서 소스 항목 '{{sourceName}}'을(를) 제거하려는 중 오류: {{message}}",
+        "codecChangedUpdatingSources": "코덱이 {{codec}}(으)로 변경됨. OBS 소스를 업데이트 중...",
+        "codecChangedNotConnected": "OBS가 연결되지 않았습니다. 재연결 및 새 작업이 있을 때까지 소스가 새 코덱으로 업데이트되지 않습니다.",
+        "sourceUpdatedWithUrlAndCss": "소스 '{{sourceName}}'이(가) URL: {{url}} 및 사용자 정의 CSS로 업데이트되었습니다.",
+        "screenShareSourceUpdatedWithUrlAndCss": "화면 공유 소스 '{{sourceName}}'이(가) URL: {{url}} 및 사용자 정의 CSS로 업데이트되었습니다.",
+        "codecUpdateComplete": "OBS 소스에 대한 코덱 업데이트가 완료되었습니다.",
+        "codecCssUpdateComplete": "OBS 소스에 대한 코덱/CSS 업데이트가 완료되었습니다.",
+        "inputNameChanged": "OBS 이벤트: 입력 이름이 '{{oldName}}'에서 '{{newName}}'(으)로 변경됨. 레이아웃 업데이트를 위해 관련 씬을 확인 중.",
+        "foundPreExistingHighlight": "OBS에서 기존에 하이라이트된 소스를 찾음: '{{sourceName}}'. 활성 하이라이트를 스트림 ID: {{streamId}}(으)로 설정 중.",
+        "errorCheckingMainContentEnabled": "메인 콘텐츠 {{sourceName}}이(가) 활성화되었는지 확인하는 중 오류: {{message}}"
+    }
+  }
+}
\ No newline at end of file
diff --git a/obs/locales/nl.json b/obs/locales/nl.json
new file mode 100644
index 0000000..a86a8fa
--- /dev/null
+++ b/obs/locales/nl.json
@@ -0,0 +1,312 @@
+{
+  "pageTitle": "VDO.Ninja OBS Bedieningspaneel",
+  "mainHeading": "VDO.Ninja OBS Bediening",
+  "languageSwitcher": {
+    "label": "Taal:"
+  },
+  "collapsible": {
+    "clickToExpand": "Klik om uit te vouwen",
+    "clickToCollapse": "Klik om in te klappen"
+  },
+  "customCss": {
+    "title": "Aangepaste CSS",
+    "label": "Voer hier uw aangepaste CSS in:",
+    "description": "Deze CSS wordt toegepast op de bronnen."
+  },
+  "obsConnection": {
+    "title": "OBS WebSocket Verbinding",
+    "websocketUrlLabel": "WebSocket URL:",
+    "passwordLabel": "Wachtwoord:",
+    "cameraPrefixLabel": "Algemeen camera voorvoegsel:",
+    "reactionPrefixLabel": "Reactie voorvoegsel: VDO.",
+    "highlightPrefixLabel": "Highlight voorvoegsel: VDO.",
+    "reactionPrefixDynamicLabel": "Reactie voorvoegsel: {{prefix}}{{separator}}{{subPrefix}}",
+    "highlightPrefixDynamicLabel": "Highlight voorvoegsel: {{prefix}}{{separator}}{{subPrefix}}",
+    "connectButton": "Verbinden",
+    "disconnectButton": "Verbinding verbreken",
+    "statusDisconnected": "Status: Niet verbonden",
+    "statusConnected": "Status: Verbonden",
+    "statusConnecting": "Status: Verbinden...",
+    "statusError": "Status: Fout",
+    "statusErrorUrlMissing": "Status: Fout - URL ontbreekt",
+    "statusErrorTimeout": "Status: Fout - Verbinding time-out",
+    "statusErrorCameraPrefixMissing": "Status: Fout - Camera voorvoegsel ontbreekt"
+  },
+  "vdoNinjaSettings": {
+    "title": "VDO.Ninja Instellingen",
+    "baseUrlLabel": "VDO.Ninja Basis URL:",
+    "baseUrlPlaceholder": "https://vdo.ninja",
+    "roomNameLabel": "Kamernaam:",
+    "roomNamePlaceholder": "bijv. MyNinjaRoom",
+    "passwordLabel": "Wachtwoord:",
+    "passwordPlaceholder": "Kamer of &password",
+    "streamIdsLabel": "Stream ID's:",
+    "streamIdsPlaceholder": "streamId1,streamId2",
+    "roomOrStreamIdsNeeded": "Kamernaam of Stream ID(s) vereist",
+    "connectButton": "Verbinden",
+    "disconnectButton": "Verbinding verbreken",
+    "cancelButton": "Annuleren",
+    "statusDisconnected": "Status: Niet verbonden",
+    "statusConnected": "Status: Verbonden",
+    "statusConnecting": "Status: Verbinden...",
+    "statusConnectionFailed": "Status: Verbinding mislukt",
+    "statusConnectionLost": "Status: Verbinding verloren"
+  },
+  "streamIdMappings": {
+    "title": "Stream ID Toewijzingen",
+    "addNewMappingButton": "Nieuwe toewijzing toevoegen",
+    "ruleTitle": "Stream toewijzingsregel",
+    "streamIdPlaceholder": "Stream ID",
+    "streamIdTooltip": "VDO.Ninja Stream ID",
+    "labelPlaceholder": "Label (optioneel)",
+    "labelTooltip": "VDO.Ninja Stream Label",
+    "matchTypeTooltip": "Hoe streams te matchen",
+    "matchType": {
+        "idOnly": "Alleen ID",
+        "labelOnly": "Alleen Label",
+        "bothRequired": "Beide Vereist",
+        "eitherMatch": "Een van beide"
+    },
+    "targetSceneTooltip": "Doel OBS Scène",
+    "selectSceneOption": "Selecteer een scène...",
+    "removeRuleTooltip": "Deze toewijzingsregel verwijderen",
+    "cloneToMainSceneLabel": "Klonen naar hoofdscène",
+    "switchToSceneOnAddLabel": "Schakel naar scène bij toevoegen",
+    "ruleDescription": "Definieer hoe binnenkomende streams naar OBS scènes worden geleid."
+  },
+  "obsTargetSettings": {
+    "title": "OBS Doelinstellingen",
+    "sourceCreationScenesLabel": "Scènes voor bronnen maken:",
+    "sourceCreationScenesDesc": "Selecteer één of meer scènes. De eerste wordt de primaire, anderen voor kopiëren.",
+    "loadingScenes": "Scènes laden...",
+    "noScenesFound": "Geen scènes gevonden",
+    "refetchScenesButton": "Scènes opnieuw ophalen",
+    "screenShareSettings": {
+        "title": "Scherm delen instellingen:",
+        "widthLabel": "Breedte:",
+        "heightLabel": "Hoogte:",
+        "resolutionNote": "Deze resolutie wordt gebruikt voor schermdelen bronnen in scènes met een 'Reactie' layout."
+    },
+    "autoAddSourcesLabel": "Nieuwe streams automatisch als bronnen toevoegen",
+    "autoRemoveSourcesLabel": "Bronnen automatisch verwijderen bij verbreken verbinding",
+    "newSourceSizing": {
+        "label": "Standaard brongrootte:",
+        "defaultSizeOption": "Standaard (1920x1080 op 0,0)",
+        "bestFitOption": "Beste pasvorm (Beeldverhouding behouden)",
+        "stretchToFillOption": "Uitrekken om scherm te vullen",
+        "overrideNote": "Specifieke layouts gedefinieerd in de \"Layouts\" sectie overschrijven deze voor die scènes."
+    },
+    "codec": {
+        "label": "Codec:",
+        "noneOption": "geen",
+        "learnMoreTitle": "Meer leren over codec opties"
+    }
+  },
+  "sceneLayouts": {
+    "title": "Scène Layouts",
+    "addNewLayoutButton": "Nieuwe layout toevoegen",
+    "description": "Definieer automatische layouts voor specifieke OBS scènes. Deze overschrijven de standaard brongrootte voor de geconfigureerde scènes.",
+    "sceneLabel": "Scène:",
+    "selectSceneOption": "Selecteer scène...",
+    "layoutLabel": "Layout:",
+    "selectLayoutOption": "Selecteer layout...",
+    "layoutTypes": {
+        "grid": "Raster",
+        "reaction": "Reactie",
+        "highlight": "Highlight"
+    },
+    "noActiveLayouts": "Geen actieve layouts",
+    "removeLayoutTooltip": "Deze layout configuratie verwijderen",
+    "sceneAlreadyConfiguredTooltip": "(Al in gebruik)",
+    "sceneAlreadyConfiguredAlert": "Scène '{{sceneName}}' is al in gebruik door een andere layout configuratie.",
+    "controls": {
+        "margin": "Marge",
+        "spacing": "Tussenruimte",
+        "offsetX": "X Verschuiving",
+        "offsetY": "Y Verschuiving",
+        "gridSplitScreenTwoCameras": "Gesplitst scherm voor 2 camera's (Raster)",
+        "distributeCameras": "Camera's verdelen (Reactie/Highlight)"
+    }
+  },
+  "activeStreams": {
+    "title": "Actieve Streams",
+    "noActiveStreams": "Geen actieve streams",
+    "streamIdLabel": "ID: {{id}}",
+    "labelLabel": "Label: {{label}}",
+    "targetSceneLabelText": "Doel scène: {{sceneName}}",
+    "notSet": "Niet ingesteld",
+    "defaultSceneTag": "standaard",
+    "mappedSceneTag": "toegewezen",
+    "addedToObs": "✓ Toegevoegd aan OBS",
+    "notInObs": "✗ Niet in OBS",
+    "buttons": {
+        "addToObs": "Toevoegen aan OBS",
+        "removeFromObs": "Verwijderen uit OBS",
+        "highlight": "Highlight",
+        "unhighlight": "Highlight verwijderen",
+        "screenShare": "Scherm delen",
+        "stopScreenShare": "Stop scherm delen"
+    }
+  },
+  "log": {
+    "title": "Log"
+  },
+  "vdoNinja": {
+    "defaultStreamLabel": "Stream {{id}}"
+  },
+  "logMessages": {
+    "settingsSaved": "Instellingen opgeslagen.",
+    "settingsLoaded": "Instellingen geladen uit localStorage.",
+    "customCssChangedWillApplyToSource": "Aangepaste CSS invoer gewijzigd. Het wordt direct toegepast op OBS broninstellingen bij volgende creatie/update.",
+    "errorLoadingSettings": "Fout bij laden instellingen uit localStorage: {{message}}. Standaardwaarden gebruiken.",
+    "noSavedSettings": "Geen opgeslagen instellingen gevonden. Standaardwaarden gebruiken.",
+    "appInitialized": "VDO.Ninja OBS Bedieningspaneel geïnitialiseerd. Welkom!",
+    "jsShaLoaded": "jsSHA bibliotheek succesvol geladen (fallback voor Web Crypto).",
+    "errorLoadingJsSha": "Fout: Kan jsSHA bibliotheek niet laden. OBS authenticatie kan falen als Web Crypto ook niet beschikbaar is.",
+    "loadedStreamMappings": "{{count}} stream toewijzingen geladen.",
+    "errorLoadingStreamMappings": "Fout bij laden stream toewijzingen uit localStorage: {{message}}",
+    "warningStreamMappingElementsNotFound": "Waarschuwing: Kon niet alle verwachte elementen vinden in een stream toewijzing UI div.",
+    "loadedLayoutConfigs": "{{count}} scène layout configuraties geladen.",
+    "errorLoadingLayoutConfigs": "Fout bij laden scène layout configuraties: {{message}}",
+    "savedLayoutConfigs": "{{count}} scène layout configuraties opgeslagen.",
+    "errorSavingLayoutsDuplicateScene": "Fout bij opslaan layouts: Scène '{{sceneName}}' is meerdere keren geconfigureerd. Zorg ervoor dat elke scène slechts één layout heeft.",
+    "layoutSceneNotFound": "Opgeslagen scène '{{sceneName}}' voor layout niet gevonden in huidige OBS scènes.",
+    "errorHidingSource": "Fout bij verbergen bronitem {{sourceName}} in {{sceneName}}: {{message}}",
+    "sceneAlreadyConfiguredError": "Scène '{{sceneName}}' is al geconfigureerd voor een andere layout. Selectie ongedaan maken.",
+    "vdoNinja": {
+        "disconnected": "Verbinding met VDO.Ninja verbroken.",
+        "alreadyConnected": "Al verbonden met VDO.Ninja.",
+        "errorRoomOrStreamIdNeeded": "VDO.Ninja Fout: Kamernaam of Stream ID(s) moet worden opgegeven.",
+        "connectionTimeout": "VDO.Ninja verbinding time-out. Geen activiteit ontvangen van iframe.",
+        "roomOrStreamIdNeededForConnect": "VDO.Ninja: Kamernaam of specifieke Stream ID(s) moet worden opgegeven om te verbinden.",
+        "streamIdsEmptyAfterTrim": "VDO.Ninja: Stream ID's opgegeven maar waren leeg na trimmen.",
+        "initializingIframe": "VDO.Ninja iframe initialiseren met URL: {{url}}",
+        "invalidBaseUrl": "Ongeldige VDO.Ninja basis URL in instellingen: {{url}}",
+        "iframeConnectedActive": "VDO.Ninja iframe verbinding tot stand gebracht en actief.",
+        "streamConnectedActive": "VDO.Ninja stream verbonden/actief: \"{{label}}\" (ID: {{id}})",
+        "autoAddingStream": "Stream {{id}} automatisch toevoegen aan OBS.",
+        "streamDisconnectedInactive": "VDO.Ninja stream verbroken/inactief: \"{{label}}\" (ID: {{id}})",
+        "autoRemovingStream": "Stream {{id}} automatisch verwijderen uit OBS.",
+        "streamLabelUpdated": "VDO.Ninja stream label bijgewerkt voor ID {{id}}: \"{{newLabel}}\" (was \"{{oldLabel}}\")",
+        "connectionLostResetting": "VDO.Ninja verbinding verloren (geen activiteit van iframe). Poging tot reset."
+    },
+    "obs": {
+        "disconnecting": "Verbinding met OBS WebSocket verbreken...",
+        "errorCameraPrefixRequired": "Fout: Algemeen camera voorvoegsel is vereist voor OBS verbinding.",
+        "errorUrlRequired": "Fout: OBS WebSocket URL is vereist.",
+        "attemptingConnection": "Poging om verbinding te maken met OBS WebSocket op {{url}}...",
+        "connectionTimeout": "OBS WebSocket verbindingspoging time-out.",
+        "connectionOpenedWaitingHello": "OBS WebSocket verbinding geopend. Wachten op Server Hello...",
+        "receivedHelloSendingIdentify": "Hello ontvangen van OBS. Identify verzenden...",
+        "authDataPrepared": "Authenticatiegegevens voorbereid voor Identify bericht.",
+        "warningAuthRequiredNoPassword": "Waarschuwing: OBS server vereist authenticatie, maar geen wachtwoord opgegeven.",
+        "authSuccessConnected": "OBS WebSocket Authenticatie succesvol! Verbinding tot stand gebracht.",
+        "requestError": "OBS Verzoek Fout (Type: {{type}}, ID: {{id}}): {{error}} (Code: {{code}})",
+        "eventSceneListChanged": "OBS Event: Scènelijst gewijzigd. Scènes opnieuw ophalen.",
+        "errorProcessingMessage": "Fout bij verwerken OBS WebSocket bericht: {{message}}. Data: {{data}}",
+        "webSocketError": "OBS WebSocket Fout: {{error}}",
+        "authFailedReason": "Authenticatie mislukt - onjuist wachtwoord of authenticatie vereist en niet opgegeven.",
+        "connectionClosedReasonCode": "Code: {{code}}{{wasClean}}",
+        "uncleanDisconnection": " (Onverwachte verbreking)",
+        "connectionClosed": "OBS WebSocket Verbinding gesloten. Reden: {{reason}}",
+        "errorCreatingConnection": "Fout bij maken OBS WebSocket verbinding: {{message}}",
+        "authGenerationError": "OBS Authenticatie generatie fout: {{message}}",
+        "cannotSendRequestNotConnected": "Kan verzoek '{{requestType}}' niet verzenden: Niet verbonden met OBS.",
+        "errorSendingRequest": "Fout bij verzenden OBS verzoek '{{requestType}}': {{message}}",
+        "requestTimeout": "OBS Verzoek '{{requestType}}' (ID: {{id}}) time-out.",
+        "connectionEstablishedFetchingData": "OBS Verbinding volledig tot stand gebracht. Initiële data ophalen...",
+        "errorPostConnectionSetup": "Fout tijdens post-OBS verbinding setup (scènes ophalen): {{message}}",
+        "connectionClosedOrLost": "OBS Verbinding is gesloten of verloren.",
+        "cannotFetchScenesNotConnected": "Kan OBS scènes niet ophalen: Niet verbonden met OBS.",
+        "fetchingScenes": "OBS scènes ophalen...",
+        "fetchedScenesCount": "{{count}} scènes opgehaald van OBS.",
+        "failedToFetchScenes": "Ophalen OBS scènes mislukt of geen scènes geretourneerd.",
+        "errorFetchingScenes": "Fout bij ophalen OBS scènes: {{message}}",
+        "cannotHighlightNotConnected": "Kan niet highlighten: Niet verbonden met OBS.",
+        "highlightLayoutActiveManualLegacy": "Scène '{{sceneName}}' gebruikt de nieuwe Highlight Layout. Handmatige highlight knop kan beperkt effect hebben of wordt overschreven.",
+        "stoppingScreenShareForHighlight": "Een scherm delen is actief ({{id}}). Dit stoppen voordat gemarkeerd wordt.",
+        "cannotScreenShareNotConnected": "Kan scherm delen niet starten: Niet verbonden met OBS.",
+        "unhighlightingForScreenShare": "Een camera is gemarkeerd ({{id}}). Markering verwijderen voordat scherm delen wordt gestart.",
+        "cannotAddScreenShareNotConnected": "Kan scherm delen niet toevoegen: Niet verbonden met OBS.",
+        "cannotAddScreenShareNoRoom": "Kan scherm delen niet toevoegen: VDO.Ninja Kamernaam is vereist voor scherm delen URLs.",
+        "cannotAddScreenShareNoReactionLayoutScene": "Kan scherm delen niet toevoegen: Geen scènes zijn geconfigureerd met een 'Reactie' layout.",
+        "addingUpdatingScreenShareToReactionScenes": "Scherm delen bron '{{sourceName}}' (URL: {{url}}) toevoegen/bijwerken aan Reactie scènes. Primaire creatie in '{{primaryScene}}'. ({{count}} scènes totaal)",
+        "reconfiguringExistingScreenShare": "Bestaande scherm delen bron '{{oldName}}' herconfigureren naar '{{newName}}'.",
+        "reconfiguredRenamedScreenShare": "Bestaande scherm delen bron herconfigureerd en hernoemd naar '{{sourceName}}'.",
+        "screenShareExistsUpdating": "Scherm delen bron '{{sourceName}}' bestaat al. Instellingen bijwerken.",
+        "creatingNewScreenShareInScene": "Nieuwe scherm delen bron '{{sourceName}}' maken in scène '{{sceneName}}'.",
+        "ensuredTransformedScreenShareReaction": "Scherm delen bron '{{sourceName}}' verzekerd en getransformeerd in Reactie scène '{{sceneName}}'.",
+        "sourceFoundInSceneEnabled": "Bron '{{sourceName}}' gevonden in scène '{{sceneName}}', item ID: {{itemId}}. Verzekeren dat het ingeschakeld is.",
+        "sourceAddedToScene": "Bron '{{sourceName}}' toegevoegd aan scène '{{sceneName}}', item ID: {{itemId}}.",
+        "errorCreatingSceneItem": "Fout bij maken scène item voor '{{sourceName}}' in '{{sceneName}}': {{message}}",
+        "errorCheckingSceneForItem": "Fout bij controleren op '{{sourceName}}' in scène '{{sceneName}}': {{message}}",
+        "errorApplyingInitialTransform": "Fout bij toepassen initiële standaard transformatie op '{{sourceName}}' in '{{sceneName}}': {{message}}",
+        "successConfigScreenShare": "Scherm delen succesvol geconfigureerd voor stream {{streamId}} ({{label}}).",
+        "errorAddingUpdatingScreenShare": "Fout bij toevoegen/bijwerken scherm delen bron '{{sourceName}}': {{message}}.",
+        "cannotToggleHighlightNotConnected": "Kan highlight niet togglen: Niet verbonden met OBS.",
+        "streamUnhighlighted": "Stream {{id}} highlight verwijderd (hernoemd van {{oldName}} naar {{newName}})",
+        "streamSuccessfullyUnhighlighted": "Stream {{id}} succesvol highlight verwijderd (hernoemd naar {{newName}})",
+        "streamSuccessfullyHighlighted": "Stream {{id}} succesvol gemarkeerd (hernoemd naar {{newName}})",
+        "unhighlightError": "Kon highlight niet verwijderen (hernoemen) {{sourceName}}, bestaat mogelijk niet of andere fout: {{message}}",
+        "highlightError": "Kon niet highlighten (hernoemen) {{sourceName}}, bestaat mogelijk niet of andere fout: {{message}}",
+        "legacyHighlightUnhighlightOnRemove": "Stream {{id}} was legacy gemarkeerd. Markering verwijderen.",
+        "cannotAddStreamNotConnected": "Kan stream \"{{label}}\" ({{id}}) niet toevoegen aan OBS: Niet verbonden met OBS.",
+        "cannotAddStreamNoTargetSceneName": "Kan stream \"{{label}}\" ({{id}}) niet toevoegen: Doel OBS scène naam is vereist maar niet ingesteld (geen standaard en geen toewijzing).",
+        "foundExistingStandardSource": "Bestaande standaard bron '{{sourceName}}' gevonden voor stream {{streamId}}.",
+        "foundExistingHighlightForConnectingStream": "Bestaande OBS bron '{{sourceName}}' gevonden die overeenkomt met highlight naamgeving voor verbindende stream {{streamId}}. Interne highlight status bijwerken.",
+        "foundExistingHighlightedSource": "Bestaande gemarkeerde bron '{{sourceName}}' gevonden voor stream {{streamId}}.",
+        "noExistingSourceFoundWillCreate": "Noch standaard ('{{baseSourceName}}') noch gemarkeerde ('{{highlightedSourceName}}') bron gevonden voor stream {{streamId}}. Nieuwe maken.",
+        "noExistingStandardSourceSamePrefix": "Standaard bron '{{sourceName}}' niet gevonden voor stream {{streamId}} (highlight voorvoegsel is hetzelfde). Nieuwe maken.",
+        "errorGettingCanvasSize": "Fout bij ophalen OBS canvas grootte: {{message}}. Standaard {{width}}x{{height}} gebruiken.",
+        "sourceNotGlobalCreating": "Bron '{{sourceName}}' bestaat niet globaal. Maken in scène '{{sceneName}}'.",
+        "sourceCreatedAddedToScene": "Bron '{{sourceName}}' gemaakt en toegevoegd aan scène '{{sceneName}}'.",
+        "sourceGlobalUpdatingWithUrl": "Bron '{{sourceName}}' bestaat al globaal. Instellingen bijwerken. URL: {{url}}",
+        "sourceFoundAsItemInScene": "Bron '{{sourceName}}' gevonden als item in scène '{{sceneName}}'.",
+        "sourceNotInSceneAdding": "Bron '{{sourceName}}' niet in scène '{{sceneName}}'. Toevoegen.",
+        "cloningToMainScene": "Bron '{{sourceName}}' klonen naar hoofdscène (uit selectievakjes) '{{sceneName}}' vanwege toewijzingsregel.",
+        "addingSourceToOtherScene": "Bron '{{sourceName}}' als item toevoegen aan andere geselecteerde scène '{{sceneName}}'.",
+        "switchingProgramScene": "OBS huidige programma scène overschakelen naar '{{sceneName}}'.",
+        "successfullyProcessedStream": "Stream \"{{label}}\" ({{id}}) succesvol verwerkt, effectieve OBS bron: '{{sourceName}}'.",
+        "errorManagingStream": "Fout bij beheren stream '{{sourceName}}' (\"{{label}}\") in OBS: {{message}}",
+        "applyTransformAndGridCalled": "applyTransformAndGrid aangeroepen voor {{sourceName}} in {{sceneName}}. Volledige layout update voor scène triggeren.",
+        "triggeringLayoutUpdate": "Layout update triggeren voor scène '{{sceneName}}'...",
+        "gridFallbackSourceChanged": "Raster instellingen voor '{{sourceGridScene}}' (primaire fallback kandidaat) gewijzigd. Update triggeren voor Reactie/Highlight scène '{{dependentScene}}'.",
+        "noSceneItemsForLayout": "Geen scène items gevonden in scène '{{sceneName}}' voor layout update.",
+        "applyingConfiguredLayout": "'{{layoutType}}' layout toepassen op scène '{{sceneName}}'. ({{count}} items)",
+        "unknownLayoutType": "Onbekend layout type '{{layoutType}}' voor scène '{{sceneName}}'. Standaard grootte toepassen.",
+        "noSpecificLayoutApplyingDefault": "Geen specifieke layout voor scène '{{sceneName}}'. Standaard brongrootte ('{{sizing}}') toepassen.",
+        "errorTriggeringLayoutUpdate": "Fout tijdens layout update voor scène '{{sceneName}}': {{message}}",
+        "applyingDefaultSizing": "Standaard brongrootte ('{{sizing}}') toepassen op {{count}} items in scène '{{sceneName}}'.",
+        "errorApplyingDefaultTransformItem": "Fout bij toepassen standaard transformatie op {{sourceName}} in {{sceneName}}: {{message}}",
+        "noSourcesForGridLayout": "Geen VDO.Ninja camera bronnen om raster layout toe te passen in scène '{{sceneName}}'.",
+        "applyingGridLayoutScene": "Raster layout toepassen op {{count}} VDO.Ninja camera bronnen in scène '{{sceneName}}'.",
+        "applyingGridSplitScreen": "2-camera gesplitst scherm raster layout toepassen op scène '{{sceneName}}'.",
+        "reactionMainNotFoundFallbackGrid": "Hoofdinhoud voor Reactie layout in scène '{{sceneName}}' niet gevonden/zichtbaar. Fallback raster van camera's toepassen.",
+        "highlightMainNotFoundFallbackGrid": "Hoofdinhoud voor Highlight layout in scène '{{sceneName}}' niet gevonden/zichtbaar. Fallback raster van camera's toepassen.",
+        "usingGridSceneFallbackSettings": "Raster instellingen van de eerste geconfigureerde 'Raster' layout scène ('{{sceneName}}') gebruiken als fallback voor '{{targetScene}}'.",
+        "usingDefaultGridFallbackSettings": "Geen 'Raster' layout scène gevonden. Standaard raster instellingen gebruiken als fallback voor '{{targetScene}}'.",
+        "applyingFallbackGridToCameras": "Fallback raster layout toepassen op {{count}} camera bronnen in scène '{{sceneName}}'.",
+        "noCamerasForFallbackGridHidingAll": "Geen camera items om weer te geven in fallback raster voor scène '{{sceneName}}'. Alle VDO bronnen in deze scène worden verborgen.",
+        "cannotRemoveStreamNotConnected": "Kan stream {{id}} niet verwijderen uit OBS: Niet verbonden met OBS.",
+        "triggeredRemoval": "Gebruiker of automatisch getriggerde verwijdering van stream '{{id}}' uit OBS. Basis bron: '{{baseName}}'.",
+        "streamScreenSharingRemoving": "Stream {{id}} was actief scherm aan het delen. Scherm delen verwijdering starten.",
+        "finishedRemovingSourceItems": "Klaar met verwijderen bronnitems voor stream {{id}} uit opgegeven OBS scènes.",
+        "cannotRemoveScreenShareNotConnected": "Kan scherm delen niet verwijderen: Niet verbonden met OBS.",
+        "attemptingRemoveScreenShareSource": "Poging om scherm delen bron '{{sourceName}}' volledig te verwijderen uit OBS (alle scènes en input).",
+        "removingGlobalInput": "Globale input '{{sourceName}}' verwijderen uit OBS.",
+        "successfullyRemovedInput": "Input '{{sourceName}}' succesvol verwijderd.",
+        "errorScreenShareRemovalProcess": "Fout tijdens scherm delen verwijderingsproces voor '{{sourceName}}': {{message}}",
+        "removingSourceItemFromScene": "Bronitem '{{sourceName}}' (ID: {{itemId}}) verwijderen uit scène '{{sceneName}}'.",
+        "errorTryingRemoveSourceItem": "Fout bij poging bronitem '{{sourceName}}' te verwijderen uit scène '{{sceneName}}': {{message}}",
+        "codecChangedUpdatingSources": "Codec gewijzigd naar: {{codec}}. OBS bronnen bijwerken...",
+        "codecChangedNotConnected": "OBS is niet verbonden. Bronnen worden niet bijgewerkt met de nieuwe codec tot herverbinding en een nieuwe actie.",
+        "sourceUpdatedWithUrlAndCss": "Bron '{{sourceName}}' bijgewerkt met URL: {{url}} en aangepaste CSS.",
+        "screenShareSourceUpdatedWithUrlAndCss": "Scherm delen bron '{{sourceName}}' bijgewerkt met URL: {{url}} en aangepaste CSS.",
+        "codecUpdateComplete": "Codec update voor OBS bronnen voltooid.",
+        "codecCssUpdateComplete": "Codec/CSS update voor OBS bronnen voltooid.",
+        "inputNameChanged": "OBS Event: Input naam gewijzigd van '{{oldName}}' naar '{{newName}}'. Relevante scènes controleren voor layout updates.",
+        "foundPreExistingHighlight": "Vooraf bestaande gemarkeerde bron gevonden in OBS: '{{sourceName}}'. Actieve highlight instellen op stream ID: {{streamId}}.",
+        "errorCheckingMainContentEnabled": "Fout bij controleren of hoofdinhoud {{sourceName}} ingeschakeld is: {{message}}"
+    }
+  }
+}
\ No newline at end of file
diff --git a/obs/locales/pl.json b/obs/locales/pl.json
new file mode 100644
index 0000000..c2cc4ce
--- /dev/null
+++ b/obs/locales/pl.json
@@ -0,0 +1,312 @@
+{
+  "pageTitle": "VDO.Ninja Panel Kontrolny OBS",
+  "mainHeading": "VDO.Ninja Kontrola OBS",
+  "languageSwitcher": {
+    "label": "Język:"
+  },
+  "collapsible": {
+    "clickToExpand": "Kliknij aby rozwinąć",
+    "clickToCollapse": "Kliknij aby zwinąć"
+  },
+  "customCss": {
+    "title": "Własny CSS",
+    "label": "Wprowadź swój własny CSS tutaj:",
+    "description": "Ten CSS zostanie zastosowany do źródeł."
+  },
+  "obsConnection": {
+    "title": "Połączenie OBS WebSocket",
+    "websocketUrlLabel": "URL WebSocket:",
+    "passwordLabel": "Hasło:",
+    "cameraPrefixLabel": "Ogólny prefiks kamery:",
+    "reactionPrefixLabel": "Prefiks reakcji: VDO.",
+    "highlightPrefixLabel": "Prefiks wyróżnienia: VDO.",
+    "reactionPrefixDynamicLabel": "Prefiks reakcji: {{prefix}}{{separator}}{{subPrefix}}",
+    "highlightPrefixDynamicLabel": "Prefiks wyróżnienia: {{prefix}}{{separator}}{{subPrefix}}",
+    "connectButton": "Połącz",
+    "disconnectButton": "Rozłącz",
+    "statusDisconnected": "Status: Rozłączony",
+    "statusConnected": "Status: Połączony",
+    "statusConnecting": "Status: Łączenie...",
+    "statusError": "Status: Błąd",
+    "statusErrorUrlMissing": "Status: Błąd - Brak URL",
+    "statusErrorTimeout": "Status: Błąd - Przekroczono limit czasu połączenia",
+    "statusErrorCameraPrefixMissing": "Status: Błąd - Brak prefiksu kamery"
+  },
+  "vdoNinjaSettings": {
+    "title": "Ustawienia VDO.Ninja",
+    "baseUrlLabel": "Bazowy URL VDO.Ninja:",
+    "baseUrlPlaceholder": "https://vdo.ninja",
+    "roomNameLabel": "Nazwa pokoju:",
+    "roomNamePlaceholder": "np. MyNinjaRoom",
+    "passwordLabel": "Hasło:",
+    "passwordPlaceholder": "Pokój lub &password",
+    "streamIdsLabel": "ID strumieni:",
+    "streamIdsPlaceholder": "streamId1,streamId2",
+    "roomOrStreamIdsNeeded": "Wymagana nazwa pokoju lub ID strumienia",
+    "connectButton": "Połącz",
+    "disconnectButton": "Rozłącz",
+    "cancelButton": "Anuluj",
+    "statusDisconnected": "Status: Rozłączony",
+    "statusConnected": "Status: Połączony",
+    "statusConnecting": "Status: Łączenie...",
+    "statusConnectionFailed": "Status: Połączenie nieudane",
+    "statusConnectionLost": "Status: Utracono połączenie"
+  },
+  "streamIdMappings": {
+    "title": "Mapowania ID strumieni",
+    "addNewMappingButton": "Dodaj nowe mapowanie",
+    "ruleTitle": "Reguła mapowania strumienia",
+    "streamIdPlaceholder": "ID strumienia",
+    "streamIdTooltip": "ID strumienia VDO.Ninja",
+    "labelPlaceholder": "Etykieta (opcjonalna)",
+    "labelTooltip": "Etykieta strumienia VDO.Ninja",
+    "matchTypeTooltip": "Jak dopasować strumień",
+    "matchType": {
+        "idOnly": "Tylko ID",
+        "labelOnly": "Tylko etykieta",
+        "bothRequired": "Oba wymagane",
+        "eitherMatch": "Dowolne dopasowanie"
+    },
+    "targetSceneTooltip": "Docelowa scena OBS",
+    "selectSceneOption": "Wybierz scenę...",
+    "removeRuleTooltip": "Usuń tę regułę mapowania",
+    "cloneToMainSceneLabel": "Klonuj do głównej sceny",
+    "switchToSceneOnAddLabel": "Przełącz na scenę przy dodawaniu",
+    "ruleDescription": "Określ jak przychodzące strumienie są kierowane do scen OBS."
+  },
+  "obsTargetSettings": {
+    "title": "Ustawienia docelowe OBS",
+    "sourceCreationScenesLabel": "Sceny do tworzenia źródeł:",
+    "sourceCreationScenesDesc": "Wybierz jedną lub więcej scen. Pierwsza będzie główna, pozostałe do kopiowania.",
+    "loadingScenes": "Ładowanie scen...",
+    "noScenesFound": "Nie znaleziono scen",
+    "refetchScenesButton": "Pobierz sceny ponownie",
+    "screenShareSettings": {
+        "title": "Ustawienia udostępniania ekranu:",
+        "widthLabel": "Szerokość:",
+        "heightLabel": "Wysokość:",
+        "resolutionNote": "Ta rozdzielczość będzie używana dla źródeł udostępniania ekranu w scenach z układem 'Reakcja'."
+    },
+    "autoAddSourcesLabel": "Automatycznie dodawaj nowe strumienie jako źródła",
+    "autoRemoveSourcesLabel": "Automatycznie usuwaj źródła przy rozłączeniu",
+    "newSourceSizing": {
+        "label": "Domyślny rozmiar źródła:",
+        "defaultSizeOption": "Domyślny (1920x1080 na 0,0)",
+        "bestFitOption": "Najlepsze dopasowanie (zachowaj proporcje)",
+        "stretchToFillOption": "Rozciągnij do wypełnienia ekranu",
+        "overrideNote": "Konkretne układy zdefiniowane w sekcji \"Układy\" nadpiszą te ustawienia dla tych scen."
+    },
+    "codec": {
+        "label": "Kodek:",
+        "noneOption": "brak",
+        "learnMoreTitle": "Dowiedz się więcej o opcjach kodeków"
+    }
+  },
+  "sceneLayouts": {
+    "title": "Układy scen",
+    "addNewLayoutButton": "Dodaj nowy układ",
+    "description": "Zdefiniuj automatyczne układy dla konkretnych scen OBS. Nadpiszą one domyślny rozmiar źródła dla skonfigurowanych scen.",
+    "sceneLabel": "Scena:",
+    "selectSceneOption": "Wybierz scenę...",
+    "layoutLabel": "Układ:",
+    "selectLayoutOption": "Wybierz układ...",
+    "layoutTypes": {
+        "grid": "Siatka",
+        "reaction": "Reakcja",
+        "highlight": "Wyróżnienie"
+    },
+    "noActiveLayouts": "Brak aktywnych układów",
+    "removeLayoutTooltip": "Usuń tę konfigurację układu",
+    "sceneAlreadyConfiguredTooltip": "(Już w użyciu)",
+    "sceneAlreadyConfiguredAlert": "Scena '{{sceneName}}' jest już używana przez inną konfigurację układu.",
+    "controls": {
+        "margin": "Margines",
+        "spacing": "Odstęp",
+        "offsetX": "Przesunięcie X",
+        "offsetY": "Przesunięcie Y",
+        "gridSplitScreenTwoCameras": "Podzielony ekran dla 2 kamer (Siatka)",
+        "distributeCameras": "Rozłóż kamery (Reakcja/Wyróżnienie)"
+    }
+  },
+  "activeStreams": {
+    "title": "Aktywne strumienie",
+    "noActiveStreams": "Brak aktywnych strumieni",
+    "streamIdLabel": "ID: {{id}}",
+    "labelLabel": "Etykieta: {{label}}",
+    "targetSceneLabelText": "Docelowa scena: {{sceneName}}",
+    "notSet": "Nie ustawiono",
+    "defaultSceneTag": "domyślna",
+    "mappedSceneTag": "zmapowana",
+    "addedToObs": "✓ Dodano do OBS",
+    "notInObs": "✗ Nie ma w OBS",
+    "buttons": {
+        "addToObs": "Dodaj do OBS",
+        "removeFromObs": "Usuń z OBS",
+        "highlight": "Wyróżnij",
+        "unhighlight": "Usuń wyróżnienie",
+        "screenShare": "Udostępnij ekran",
+        "stopScreenShare": "Zatrzymaj udostępnianie ekranu"
+    }
+  },
+  "log": {
+    "title": "Log"
+  },
+  "vdoNinja": {
+    "defaultStreamLabel": "Strumień {{id}}"
+  },
+  "logMessages": {
+    "settingsSaved": "Ustawienia zapisane.",
+    "settingsLoaded": "Ustawienia załadowane z localStorage.",
+    "customCssChangedWillApplyToSource": "Zmieniono własny CSS. Zostanie on bezpośrednio zastosowany do ustawień źródła OBS przy następnym tworzeniu/aktualizacji.",
+    "errorLoadingSettings": "Błąd ładowania ustawień z localStorage: {{message}}. Używam wartości domyślnych.",
+    "noSavedSettings": "Nie znaleziono zapisanych ustawień. Używam wartości domyślnych.",
+    "appInitialized": "Panel Kontrolny VDO.Ninja OBS zainicjalizowany. Witaj!",
+    "jsShaLoaded": "Biblioteka jsSHA załadowana pomyślnie (zapasowa dla Web Crypto).",
+    "errorLoadingJsSha": "Błąd: Nie udało się załadować biblioteki jsSHA. Uwierzytelnianie OBS może się nie powieść, jeśli Web Crypto też jest niedostępne.",
+    "loadedStreamMappings": "Załadowano {{count}} mapowań strumieni.",
+    "errorLoadingStreamMappings": "Błąd ładowania mapowań strumieni z localStorage: {{message}}",
+    "warningStreamMappingElementsNotFound": "Ostrzeżenie: Nie można znaleźć wszystkich oczekiwanych elementów w div UI mapowania strumienia.",
+    "loadedLayoutConfigs": "Załadowano {{count}} konfiguracji układów scen.",
+    "errorLoadingLayoutConfigs": "Błąd ładowania konfiguracji układów scen: {{message}}",
+    "savedLayoutConfigs": "Zapisano {{count}} konfiguracji układów scen.",
+    "errorSavingLayoutsDuplicateScene": "Błąd zapisywania układów: Scena '{{sceneName}}' jest skonfigurowana wielokrotnie. Upewnij się, że każda scena ma tylko jeden układ.",
+    "layoutSceneNotFound": "Zapisana scena '{{sceneName}}' dla układu nie została znaleziona w bieżących scenach OBS.",
+    "errorHidingSource": "Błąd ukrywania elementu źródła {{sourceName}} w {{sceneName}}: {{message}}",
+    "sceneAlreadyConfiguredError": "Scena '{{sceneName}}' jest już skonfigurowana dla innego układu. Cofam wybór.",
+    "vdoNinja": {
+        "disconnected": "Rozłączono z VDO.Ninja.",
+        "alreadyConnected": "Już połączono z VDO.Ninja.",
+        "errorRoomOrStreamIdNeeded": "Błąd VDO.Ninja: Należy podać nazwę pokoju lub ID strumienia.",
+        "connectionTimeout": "Przekroczono limit czasu połączenia VDO.Ninja. Brak aktywności z iframe.",
+        "roomOrStreamIdNeededForConnect": "VDO.Ninja: Nazwa pokoju lub konkretne ID strumienia muszą być podane aby się połączyć.",
+        "streamIdsEmptyAfterTrim": "VDO.Ninja: ID strumieni podane, ale były puste po przycięciu.",
+        "initializingIframe": "Inicjalizacja iframe VDO.Ninja z URL: {{url}}",
+        "invalidBaseUrl": "Nieprawidłowy bazowy URL VDO.Ninja w ustawieniach: {{url}}",
+        "iframeConnectedActive": "Połączenie iframe VDO.Ninja ustanowione i aktywne.",
+        "streamConnectedActive": "Strumień VDO.Ninja połączony/aktywny: \"{{label}}\" (ID: {{id}})",
+        "autoAddingStream": "Automatyczne dodawanie strumienia {{id}} do OBS.",
+        "streamDisconnectedInactive": "Strumień VDO.Ninja rozłączony/nieaktywny: \"{{label}}\" (ID: {{id}})",
+        "autoRemovingStream": "Automatyczne usuwanie strumienia {{id}} z OBS.",
+        "streamLabelUpdated": "Zaktualizowano etykietę strumienia VDO.Ninja dla ID {{id}}: \"{{newLabel}}\" (było \"{{oldLabel}}\")",
+        "connectionLostResetting": "Utracono połączenie VDO.Ninja (brak aktywności z iframe). Próba resetu."
+    },
+    "obs": {
+        "disconnecting": "Rozłączanie z OBS WebSocket...",
+        "errorCameraPrefixRequired": "Błąd: Ogólny prefiks kamery jest wymagany dla połączenia OBS.",
+        "errorUrlRequired": "Błąd: URL OBS WebSocket jest wymagany.",
+        "attemptingConnection": "Próba połączenia z OBS WebSocket na {{url}}...",
+        "connectionTimeout": "Przekroczono limit czasu próby połączenia OBS WebSocket.",
+        "connectionOpenedWaitingHello": "Połączenie OBS WebSocket otwarte. Oczekiwanie na Server Hello...",
+        "receivedHelloSendingIdentify": "Otrzymano Hello z OBS. Wysyłanie Identify...",
+        "authDataPrepared": "Dane uwierzytelniania przygotowane dla wiadomości Identify.",
+        "warningAuthRequiredNoPassword": "Ostrzeżenie: Serwer OBS wymaga uwierzytelnienia, ale nie podano hasła.",
+        "authSuccessConnected": "Uwierzytelnienie OBS WebSocket pomyślne! Połączenie ustanowione.",
+        "requestError": "Błąd żądania OBS (Typ: {{type}}, ID: {{id}}): {{error}} (Kod: {{code}})",
+        "eventSceneListChanged": "Zdarzenie OBS: Lista scen zmieniona. Ponowne pobieranie scen.",
+        "errorProcessingMessage": "Błąd przetwarzania wiadomości OBS WebSocket: {{message}}. Dane: {{data}}",
+        "webSocketError": "Błąd OBS WebSocket: {{error}}",
+        "authFailedReason": "Uwierzytelnienie nieudane - nieprawidłowe hasło lub wymagane uwierzytelnienie nie zostało podane.",
+        "connectionClosedReasonCode": "Kod: {{code}}{{wasClean}}",
+        "uncleanDisconnection": " (Nieczyste rozłączenie)",
+        "connectionClosed": "Połączenie OBS WebSocket zamknięte. Powód: {{reason}}",
+        "errorCreatingConnection": "Błąd tworzenia połączenia OBS WebSocket: {{message}}",
+        "authGenerationError": "Błąd generowania uwierzytelnienia OBS: {{message}}",
+        "cannotSendRequestNotConnected": "Nie można wysłać żądania '{{requestType}}': Nie połączono z OBS.",
+        "errorSendingRequest": "Błąd wysyłania żądania OBS '{{requestType}}': {{message}}",
+        "requestTimeout": "Przekroczono limit czasu żądania OBS '{{requestType}}' (ID: {{id}}).",
+        "connectionEstablishedFetchingData": "Połączenie OBS w pełni ustanowione. Pobieranie początkowych danych...",
+        "errorPostConnectionSetup": "Błąd podczas konfiguracji po połączeniu OBS (pobieranie scen): {{message}}",
+        "connectionClosedOrLost": "Połączenie OBS zostało zamknięte lub utracone.",
+        "cannotFetchScenesNotConnected": "Nie można pobrać scen OBS: Nie połączono z OBS.",
+        "fetchingScenes": "Pobieranie scen OBS...",
+        "fetchedScenesCount": "Pobrano {{count}} scen z OBS.",
+        "failedToFetchScenes": "Nie udało się pobrać scen OBS lub nie zwrócono żadnych scen.",
+        "errorFetchingScenes": "Błąd pobierania scen OBS: {{message}}",
+        "cannotHighlightNotConnected": "Nie można wyróżnić: Nie połączono z OBS.",
+        "highlightLayoutActiveManualLegacy": "Scena '{{sceneName}}' używa nowego układu wyróżnienia. Ręczny przycisk wyróżnienia może mieć ograniczony efekt lub zostać zastąpiony.",
+        "stoppingScreenShareForHighlight": "Udostępnianie ekranu jest aktywne ({{id}}). Zatrzymywanie przed wyróżnieniem.",
+        "cannotScreenShareNotConnected": "Nie można rozpocząć udostępniania ekranu: Nie połączono z OBS.",
+        "unhighlightingForScreenShare": "Kamera jest wyróżniona ({{id}}). Usuwanie wyróżnienia przed rozpoczęciem udostępniania ekranu.",
+        "cannotAddScreenShareNotConnected": "Nie można dodać udostępniania ekranu: Nie połączono z OBS.",
+        "cannotAddScreenShareNoRoom": "Nie można dodać udostępniania ekranu: Nazwa pokoju VDO.Ninja jest wymagana dla URL udostępniania ekranu.",
+        "cannotAddScreenShareNoReactionLayoutScene": "Nie można dodać udostępniania ekranu: Żadne sceny nie są skonfigurowane z układem 'Reakcja'.",
+        "addingUpdatingScreenShareToReactionScenes": "Dodawanie/aktualizowanie źródła udostępniania ekranu '{{sourceName}}' (URL: {{url}}) do scen reakcji. Główne tworzenie w '{{primaryScene}}'. ({{count}} scen łącznie)",
+        "reconfiguringExistingScreenShare": "Rekonfigurowanie istniejącego źródła udostępniania ekranu '{{oldName}}' na '{{newName}}'.",
+        "reconfiguredRenamedScreenShare": "Zrekonfigurowano i zmieniono nazwę istniejącego źródła udostępniania ekranu na '{{sourceName}}'.",
+        "screenShareExistsUpdating": "Źródło udostępniania ekranu '{{sourceName}}' już istnieje. Aktualizowanie jego ustawień.",
+        "creatingNewScreenShareInScene": "Tworzenie nowego źródła udostępniania ekranu '{{sourceName}}' w scenie '{{sceneName}}'.",
+        "ensuredTransformedScreenShareReaction": "Zapewniono i przekształcono źródło udostępniania ekranu '{{sourceName}}' w scenie reakcji '{{sceneName}}'.",
+        "sourceFoundInSceneEnabled": "Źródło '{{sourceName}}' znalezione w scenie '{{sceneName}}', ID elementu: {{itemId}}. Zapewnianie, że jest włączone.",
+        "sourceAddedToScene": "Źródło '{{sourceName}}' dodane do sceny '{{sceneName}}', ID elementu: {{itemId}}.",
+        "errorCreatingSceneItem": "Błąd tworzenia elementu sceny dla '{{sourceName}}' w '{{sceneName}}': {{message}}",
+        "errorCheckingSceneForItem": "Błąd sprawdzania '{{sourceName}}' w scenie '{{sceneName}}': {{message}}",
+        "errorApplyingInitialTransform": "Błąd stosowania początkowej domyślnej transformacji do '{{sourceName}}' w '{{sceneName}}': {{message}}",
+        "successConfigScreenShare": "Pomyślnie skonfigurowano udostępnianie ekranu dla strumienia {{streamId}} ({{label}}).",
+        "errorAddingUpdatingScreenShare": "Błąd dodawania/aktualizowania źródła udostępniania ekranu '{{sourceName}}': {{message}}.",
+        "cannotToggleHighlightNotConnected": "Nie można przełączyć wyróżnienia: Nie połączono z OBS.",
+        "streamUnhighlighted": "Usunięto wyróżnienie strumienia {{id}} (zmieniono nazwę z {{oldName}} na {{newName}})",
+        "streamSuccessfullyUnhighlighted": "Pomyślnie usunięto wyróżnienie strumienia {{id}} (zmieniono nazwę na {{newName}})",
+        "streamSuccessfullyHighlighted": "Pomyślnie wyróżniono strumień {{id}} (zmieniono nazwę na {{newName}})",
+        "unhighlightError": "Nie można usunąć wyróżnienia (zmienić nazwy) {{sourceName}}, może nie istnieć lub inny błąd: {{message}}",
+        "highlightError": "Nie można wyróżnić (zmienić nazwy) {{sourceName}}, może nie istnieć lub inny błąd: {{message}}",
+        "legacyHighlightUnhighlightOnRemove": "Strumień {{id}} był wyróżniony w starszy sposób. Usuwanie wyróżnienia.",
+        "cannotAddStreamNotConnected": "Nie można dodać strumienia \"{{label}}\" ({{id}}) do OBS: Nie połączono z OBS.",
+        "cannotAddStreamNoTargetSceneName": "Nie można dodać strumienia \"{{label}}\" ({{id}}): Nazwa docelowej sceny OBS jest wymagana, ale nie została ustawiona (brak domyślnej i brak mapowania).",
+        "foundExistingStandardSource": "Znaleziono istniejące standardowe źródło '{{sourceName}}' dla strumienia {{streamId}}.",
+        "foundExistingHighlightForConnectingStream": "Znaleziono istniejące źródło OBS '{{sourceName}}' które pasuje do nazewnictwa wyróżnienia dla łączącego się strumienia {{streamId}}. Aktualizowanie wewnętrznego stanu wyróżnienia.",
+        "foundExistingHighlightedSource": "Znaleziono istniejące wyróżnione źródło '{{sourceName}}' dla strumienia {{streamId}}.",
+        "noExistingSourceFoundWillCreate": "Nie znaleziono ani standardowego ('{{baseSourceName}}') ani wyróżnionego ('{{highlightedSourceName}}') źródła dla strumienia {{streamId}}. Tworzenie nowego.",
+        "noExistingStandardSourceSamePrefix": "Standardowe źródło '{{sourceName}}' nie znalezione dla strumienia {{streamId}} (prefiks wyróżnienia jest taki sam). Tworzenie nowego.",
+        "errorGettingCanvasSize": "Błąd pobierania rozmiaru płótna OBS: {{message}}. Używanie domyślnego {{width}}x{{height}}.",
+        "sourceNotGlobalCreating": "Źródło '{{sourceName}}' nie istnieje globalnie. Tworzenie w scenie '{{sceneName}}'.",
+        "sourceCreatedAddedToScene": "Źródło '{{sourceName}}' utworzone i dodane do sceny '{{sceneName}}'.",
+        "sourceGlobalUpdatingWithUrl": "Źródło '{{sourceName}}' już istnieje globalnie. Aktualizowanie jego ustawień. URL: {{url}}",
+        "sourceFoundAsItemInScene": "Źródło '{{sourceName}}' znalezione jako element w scenie '{{sceneName}}'.",
+        "sourceNotInSceneAdding": "Źródło '{{sourceName}}' nie znajduje się w scenie '{{sceneName}}'. Dodawanie.",
+        "cloningToMainScene": "Klonowanie źródła '{{sourceName}}' do głównej sceny (z pól wyboru) '{{sceneName}}' z powodu reguły mapowania.",
+        "addingSourceToOtherScene": "Dodawanie źródła '{{sourceName}}' jako elementu do innej wybranej sceny '{{sceneName}}'.",
+        "switchingProgramScene": "Przełączanie bieżącej sceny programu OBS na '{{sceneName}}'.",
+        "successfullyProcessedStream": "Pomyślnie przetworzono strumień \"{{label}}\" ({{id}}), efektywne źródło OBS: '{{sourceName}}'.",
+        "errorManagingStream": "Błąd zarządzania strumieniem '{{sourceName}}' (\"{{label}}\") w OBS: {{message}}",
+        "applyTransformAndGridCalled": "Wywołano applyTransformAndGrid dla {{sourceName}} w {{sceneName}}. Wyzwalanie pełnej aktualizacji układu dla sceny.",
+        "triggeringLayoutUpdate": "Wyzwalanie aktualizacji układu dla sceny '{{sceneName}}'...",
+        "gridFallbackSourceChanged": "Ustawienia siatki dla '{{sourceGridScene}}' (główny kandydat zapasowy) zmienione. Wyzwalanie aktualizacji dla sceny reakcji/wyróżnienia '{{dependentScene}}'.",
+        "noSceneItemsForLayout": "Nie znaleziono elementów sceny w scenie '{{sceneName}}' do aktualizacji układu.",
+        "applyingConfiguredLayout": "Stosowanie układu '{{layoutType}}' do sceny '{{sceneName}}'. ({{count}} elementów)",
+        "unknownLayoutType": "Nieznany typ układu '{{layoutType}}' dla sceny '{{sceneName}}'. Stosowanie domyślnego rozmiaru.",
+        "noSpecificLayoutApplyingDefault": "Brak konkretnego układu dla sceny '{{sceneName}}'. Stosowanie domyślnego rozmiaru źródła ('{{sizing}}').",
+        "errorTriggeringLayoutUpdate": "Błąd podczas aktualizacji układu dla sceny '{{sceneName}}': {{message}}",
+        "applyingDefaultSizing": "Stosowanie domyślnego rozmiaru źródła ('{{sizing}}') do {{count}} elementów w scenie '{{sceneName}}'.",
+        "errorApplyingDefaultTransformItem": "Błąd stosowania domyślnej transformacji do {{sourceName}} w {{sceneName}}: {{message}}",
+        "noSourcesForGridLayout": "Brak źródeł kamer VDO.Ninja do zastosowania układu siatki w scenie '{{sceneName}}'.",
+        "applyingGridLayoutScene": "Stosowanie układu siatki do {{count}} źródeł kamer VDO.Ninja w scenie '{{sceneName}}'.",
+        "applyingGridSplitScreen": "Stosowanie układu siatki podzielonego ekranu dla 2 kamer do sceny '{{sceneName}}'.",
+        "reactionMainNotFoundFallbackGrid": "Główna zawartość dla układu reakcji w scenie '{{sceneName}}' nie znaleziona/niewidoczna. Stosowanie zapasowej siatki kamer.",
+        "highlightMainNotFoundFallbackGrid": "Główna zawartość dla układu wyróżnienia w scenie '{{sceneName}}' nie znaleziona/niewidoczna. Stosowanie zapasowej siatki kamer.",
+        "usingGridSceneFallbackSettings": "Używanie ustawień siatki z pierwszej skonfigurowanej sceny z układem 'Siatka' ('{{sceneName}}') jako zapasowych dla '{{targetScene}}'.",
+        "usingDefaultGridFallbackSettings": "Nie znaleziono sceny z układem 'Siatka'. Używanie domyślnych ustawień siatki jako zapasowych dla '{{targetScene}}'.",
+        "applyingFallbackGridToCameras": "Stosowanie zapasowego układu siatki do {{count}} źródeł kamer w scenie '{{sceneName}}'.",
+        "noCamerasForFallbackGridHidingAll": "Brak elementów kamer do wyświetlenia w zapasowej siatce dla sceny '{{sceneName}}'. Wszystkie źródła VDO w tej scenie będą ukryte.",
+        "cannotRemoveStreamNotConnected": "Nie można usunąć strumienia {{id}} z OBS: Nie połączono z OBS.",
+        "triggeredRemoval": "Wyzwolone przez użytkownika lub automatycznie usunięcie strumienia '{{id}}' z OBS. Źródło bazowe: '{{baseName}}'.",
+        "streamScreenSharingRemoving": "Strumień {{id}} aktywnie udostępniał ekran. Inicjowanie usuwania udostępniania ekranu.",
+        "finishedRemovingSourceItems": "Zakończono usuwanie elementów źródła dla strumienia {{id}} z określonych scen OBS.",
+        "cannotRemoveScreenShareNotConnected": "Nie można usunąć udostępniania ekranu: Nie połączono z OBS.",
+        "attemptingRemoveScreenShareSource": "Próba całkowitego usunięcia źródła udostępniania ekranu '{{sourceName}}' z OBS (wszystkie sceny i wejście).",
+        "removingGlobalInput": "Usuwanie globalnego wejścia '{{sourceName}}' z OBS.",
+        "successfullyRemovedInput": "Pomyślnie usunięto wejście '{{sourceName}}'.",
+        "errorScreenShareRemovalProcess": "Błąd podczas procesu usuwania udostępniania ekranu dla '{{sourceName}}': {{message}}",
+        "removingSourceItemFromScene": "Usuwanie elementu źródła '{{sourceName}}' (ID: {{itemId}}) ze sceny '{{sceneName}}'.",
+        "errorTryingRemoveSourceItem": "Błąd podczas próby usunięcia elementu źródła '{{sourceName}}' ze sceny '{{sceneName}}': {{message}}",
+        "codecChangedUpdatingSources": "Kodek zmieniony na: {{codec}}. Aktualizowanie źródeł OBS...",
+        "codecChangedNotConnected": "OBS nie jest połączony. Źródła nie zostaną zaktualizowane nowym kodekiem do ponownego połączenia i nowej akcji.",
+        "sourceUpdatedWithUrlAndCss": "Źródło '{{sourceName}}' zaktualizowane z URL: {{url}} i własnym CSS.",
+        "screenShareSourceUpdatedWithUrlAndCss": "Źródło udostępniania ekranu '{{sourceName}}' zaktualizowane z URL: {{url}} i własnym CSS.",
+        "codecUpdateComplete": "Aktualizacja kodeka dla źródeł OBS zakończona.",
+        "codecCssUpdateComplete": "Aktualizacja kodeka/CSS dla źródeł OBS zakończona.",
+        "inputNameChanged": "Zdarzenie OBS: Nazwa wejścia zmieniona z '{{oldName}}' na '{{newName}}'. Sprawdzanie odpowiednich scen pod kątem aktualizacji układu.",
+        "foundPreExistingHighlight": "Znaleziono wcześniej istniejące wyróżnione źródło w OBS: '{{sourceName}}'. Ustawianie aktywnego wyróżnienia na ID strumienia: {{streamId}}.",
+        "errorCheckingMainContentEnabled": "Błąd sprawdzania czy główna zawartość {{sourceName}} jest włączona: {{message}}"
+    }
+  }
+}
\ No newline at end of file
diff --git a/obs/locales/pt.json b/obs/locales/pt.json
new file mode 100644
index 0000000..c5533ae
--- /dev/null
+++ b/obs/locales/pt.json
@@ -0,0 +1,312 @@
+{
+  "pageTitle": "Painel de Controle do OBS - VDO.Ninja",
+  "mainHeading": "VDO.Ninja - Controle do OBS",
+  "languageSwitcher": {
+    "label": "Idioma:"
+  },
+  "collapsible": {
+    "clickToExpand": "Clique para expandir",
+    "clickToCollapse": "Clique para recolher"
+  },
+  "customCss": {
+    "title": "CSS Personalizado",
+    "label": "Insira seu CSS personalizado aqui:",
+    "description": "Este CSS será aplicado às fontes."
+  },
+  "obsConnection": {
+    "title": "Conexão com OBS WebSocket",
+    "websocketUrlLabel": "URL WebSocket:",
+    "passwordLabel": "Senha:",
+    "cameraPrefixLabel": "Prefixo Geral das Câmeras:",
+    "reactionPrefixLabel": "Prefixo de Reação: VDO.",
+    "highlightPrefixLabel": "Prefixo de Destaque: VDO.",
+    "reactionPrefixDynamicLabel": "Prefixo de Reação: {{prefix}}{{separator}}{{subPrefix}}",
+    "highlightPrefixDynamicLabel": "Prefixo de Destaque: {{prefix}}{{separator}}{{subPrefix}}",
+    "connectButton": "Conectar",
+    "disconnectButton": "Desconectar",
+    "statusDisconnected": "Status: Desconectado",
+    "statusConnected": "Status: Conectado",
+    "statusConnecting": "Status: Conectando...",
+    "statusError": "Status: Erro",
+    "statusErrorUrlMissing": "Status: Erro - URL faltando",
+    "statusErrorTimeout": "Status: Erro - Tempo de conexão esgotado",
+    "statusErrorCameraPrefixMissing": "Status: Erro - Prefixo da Câmera Faltando"
+  },
+  "vdoNinjaSettings": {
+    "title": "Configurações do VDO.Ninja",
+    "baseUrlLabel": "URL Base do VDO.Ninja:",
+    "baseUrlPlaceholder": "https://vdo.ninja",
+    "roomNameLabel": "Nome da Sala:",
+    "roomNamePlaceholder": "ex: MinhaSalaNinja",
+    "passwordLabel": "Senha:",
+    "passwordPlaceholder": "Sala ou &password",
+    "streamIdsLabel": "IDs de Stream:",
+    "streamIdsPlaceholder": "streamId1,streamId2",
+    "roomOrStreamIdsNeeded": "Nome da Sala ou ID(s) de Stream são necessários",
+    "connectButton": "Conectar",
+    "disconnectButton": "Desconectar",
+    "cancelButton": "Cancelar",
+    "statusDisconnected": "Status: Desconectado",
+    "statusConnected": "Status: Conectado",
+    "statusConnecting": "Status: Conectando...",
+    "statusConnectionFailed": "Status: Falha na Conexão",
+    "statusConnectionLost": "Status: Conexão Perdida"
+  },
+  "streamIdMappings": {
+    "title": "Mapeamentos de ID de Stream",
+    "addNewMappingButton": "Adicionar Novo Mapeamento",
+    "ruleTitle": "Regra de Mapeamento de Stream",
+    "streamIdPlaceholder": "ID do Stream",
+    "streamIdTooltip": "ID do Stream VDO.Ninja",
+    "labelPlaceholder": "Rótulo (opcional)",
+    "labelTooltip": "Rótulo do Stream VDO.Ninja",
+    "matchTypeTooltip": "Como reconhecer o stream",
+    "matchType": {
+        "idOnly": "Apenas ID",
+        "labelOnly": "Apenas Rótulo",
+        "bothRequired": "Ambos Necessários",
+        "eitherMatch": "Qualquer um Combina"
+    },
+    "targetSceneTooltip": "Cena Alvo do OBS",
+    "selectSceneOption": "Selecione uma cena...",
+    "removeRuleTooltip": "Remover esta regra de mapeamento",
+    "cloneToMainSceneLabel": "Clonar para cena principal",
+    "switchToSceneOnAddLabel": "Mudar para cena ao adicionar",
+    "ruleDescription": "Defina como os streams de entrada são roteados para as cenas do OBS."
+  },
+  "obsTargetSettings": {
+    "title": "Configurações de Alvo do OBS",
+    "sourceCreationScenesLabel": "Cenas para Criação de Fontes:",
+    "sourceCreationScenesDesc": "Selecione uma ou mais cenas. A primeira será a principal, as outras para cópia.",
+    "loadingScenes": "Carregando cenas...",
+    "noScenesFound": "Nenhuma cena encontrada",
+    "refetchScenesButton": "Buscar Cenas Novamente",
+    "screenShareSettings": {
+        "title": "Configurações de Compartilhamento de Tela:",
+        "widthLabel": "Largura:",
+        "heightLabel": "Altura:",
+        "resolutionNote": "Esta resolução será usada para as fontes de compartilhamento de tela em cenas com layout de 'Reação'."
+    },
+    "autoAddSourcesLabel": "Adicionar automaticamente novos streams como fontes",
+    "autoRemoveSourcesLabel": "Remover automaticamente fontes ao desconectar",
+    "newSourceSizing": {
+        "label": "Dimensionamento Padrão de Fonte:",
+        "defaultSizeOption": "Padrão (1920x1080 em 0,0)",
+        "bestFitOption": "Melhor Ajuste (Preservar Proporção)",
+        "stretchToFillOption": "Esticar para Preencher Tela",
+        "overrideNote": "Layouts específicos definidos na seção \"Layouts\" irão sobrescrever estas configurações para aquelas cenas."
+    },
+    "codec": {
+        "label": "Codec:",
+        "noneOption": "nenhum",
+        "learnMoreTitle": "Saiba mais sobre as opções de codec"
+    }
+  },
+  "sceneLayouts": {
+    "title": "Layouts de Cena",
+    "addNewLayoutButton": "Adicionar Novo Layout",
+    "description": "Defina layouts automáticos para cenas específicas do OBS. Estes irão sobrescrever o dimensionamento padrão de fonte para as cenas configuradas.",
+    "sceneLabel": "Cena:",
+    "selectSceneOption": "Selecione a Cena...",
+    "layoutLabel": "Layout:",
+    "selectLayoutOption": "Selecione o Layout...",
+    "layoutTypes": {
+        "grid": "Grade",
+        "reaction": "Reação",
+        "highlight": "Destaque"
+    },
+    "noActiveLayouts": "Nenhum layout ativo",
+    "removeLayoutTooltip": "Remover esta configuração de layout",
+    "sceneAlreadyConfiguredTooltip": "(Já em uso)",
+    "sceneAlreadyConfiguredAlert": "A cena '{{sceneName}}' já está em uso por outra configuração de layout.",
+    "controls": {
+        "margin": "Margem",
+        "spacing": "Espaçamento",
+        "offsetX": "Deslocamento X",
+        "offsetY": "Deslocamento Y",
+        "gridSplitScreenTwoCameras": "Tela dividida para 2 câmeras (Grade)",
+        "distributeCameras": "Distribuir câmeras (Reação/Destaque)"
+    }
+  },
+  "activeStreams": {
+    "title": "Streams Ativos",
+    "noActiveStreams": "Nenhum stream ativo",
+    "streamIdLabel": "ID: {{id}}",
+    "labelLabel": "Rótulo: {{label}}",
+    "targetSceneLabelText": "Cena Alvo: {{sceneName}}",
+    "notSet": "Não Definido",
+    "defaultSceneTag": "padrão",
+    "mappedSceneTag": "mapeado",
+    "addedToObs": "✓ Adicionado ao OBS",
+    "notInObs": "✗ Não está no OBS",
+    "buttons": {
+        "addToObs": "Adicionar ao OBS",
+        "removeFromObs": "Remover do OBS",
+        "highlight": "Destacar",
+        "unhighlight": "Remover Destaque",
+        "screenShare": "Compart. Tela",
+        "stopScreenShare": "Parar Compart."
+    }
+  },
+  "log": {
+    "title": "Registro"
+  },
+  "vdoNinja": {
+    "defaultStreamLabel": "Stream {{id}}"
+  },
+  "logMessages": {
+    "settingsSaved": "Configurações salvas.",
+    "settingsLoaded": "Configurações carregadas do localStorage.",
+    "customCssChangedWillApplyToSource": "Entrada de CSS personalizado mudada. Ela será aplicada diretamente à configuração de fontes do OBS na próxima criação/atualização.",
+    "errorLoadingSettings": "Erro ao carregar configurações do localStorage: {{message}}. Usando padrões.",
+    "noSavedSettings": "Nenhuma configuração salva encontrada. Usando valores padrão.",
+    "appInitialized": "Painel de Controle OBS VDO.Ninja Inicializado. Bem-vindo!",
+    "jsShaLoaded": "Biblioteca jsSHA carregada com sucesso (fallback para Web Crypto).",
+    "errorLoadingJsSha": "Erro: Falha ao carregar a biblioteca jsSHA. A autenticação OBS pode falhar se Web Crypto também não estiver disponível.",
+    "loadedStreamMappings": "{{count}} mapeamentos de stream carregados.",
+    "errorLoadingStreamMappings": "Erro ao carregar mapeamentos de stream do localStorage: {{message}}",
+    "warningStreamMappingElementsNotFound": "Aviso: Não foi possível encontrar todos os elementos esperados em uma div da UI de mapeamento de stream.",
+    "loadedLayoutConfigs": "{{count}} configurações de layout de cena carregadas.",
+    "errorLoadingLayoutConfigs": "Erro ao carregar configurações de layout de cena: {{message}}",
+    "savedLayoutConfigs": "{{count}} configurações de layout de cena salvas.",
+    "errorSavingLayoutsDuplicateScene": "Erro ao salvar layouts: A cena '{{sceneName}}' está configurada várias vezes. Por favor, garanta que cada cena tenha apenas um layout.",
+    "layoutSceneNotFound": "A cena '{{sceneName}}' salva para o layout não foi encontrada nas cenas atuais do OBS.",
+    "errorHidingSource": "Erro ao ocultar item de fonte {{sourceName}} em {{sceneName}}: {{message}}",
+    "sceneAlreadyConfiguredError": "A cena '{{sceneName}}' já está configurada para outro layout. Revertendo seleção.",
+    "vdoNinja": {
+        "disconnected": "Desconectado do VDO.Ninja.",
+        "alreadyConnected": "Já conectado ao VDO.Ninja.",
+        "errorRoomOrStreamIdNeeded": "Erro VDO.Ninja: Nome da Sala ou ID(s) de Stream devem ser fornecidos.",
+        "connectionTimeout": "Tempo de conexão com VDO.Ninja esgotado. Nenhuma atividade recebida do iframe.",
+        "roomOrStreamIdNeededForConnect": "VDO.Ninja: Nome da Sala ou ID(s) de Stream específicos devem ser fornecidos para conectar.",
+        "streamIdsEmptyAfterTrim": "VDO.Ninja: IDs de Stream fornecidos, mas estavam vazios após remover espaços.",
+        "initializingIframe": "Inicializando iframe VDO.Ninja com URL: {{url}}",
+        "invalidBaseUrl": "URL base VDO.Ninja inválida nas configurações: {{url}}",
+        "iframeConnectedActive": "Conexão iframe VDO.Ninja estabelecida e ativa.",
+        "streamConnectedActive": "Stream VDO.Ninja conectado/ativo: \"{{label}}\" (ID: {{id}})",
+        "autoAddingStream": "Adicionando automaticamente stream {{id}} ao OBS.",
+        "streamDisconnectedInactive": "Stream VDO.Ninja desconectado/inativo: \"{{label}}\" (ID: {{id}})",
+        "autoRemovingStream": "Removendo automaticamente stream {{id}} do OBS.",
+        "streamLabelUpdated": "Rótulo do stream VDO.Ninja atualizado para ID {{id}}: \"{{newLabel}}\" (era \"{{oldLabel}}\")",
+        "connectionLostResetting": "Conexão VDO.Ninja perdida (sem atividade do iframe). Tentando reiniciar."
+    },
+    "obs": {
+        "disconnecting": "Desconectando do OBS WebSocket...",
+        "errorCameraPrefixRequired": "Erro: Prefixo Geral da Câmera é obrigatório para conexão com o OBS.",
+        "errorUrlRequired": "Erro: URL WebSocket OBS é obrigatória.",
+        "attemptingConnection": "Tentando conectar ao OBS WebSocket em {{url}}...",
+        "connectionTimeout": "Tentativa de conexão OBS WebSocket esgotou o tempo.",
+        "connectionOpenedWaitingHello": "Conexão OBS WebSocket aberta. Aguardando Hello do Servidor...",
+        "receivedHelloSendingIdentify": "Hello recebido do OBS. Enviando Identify...",
+        "authDataPrepared": "Dados de autenticação preparados para mensagem Identify.",
+        "warningAuthRequiredNoPassword": "Aviso: Servidor OBS requer autenticação, mas nenhuma senha foi fornecida.",
+        "authSuccessConnected": "Autenticação OBS WebSocket bem-sucedida! Conexão estabelecida.",
+        "requestError": "Erro na Requisição OBS (Tipo: {{type}}, ID: {{id}}): {{error}} (Código: {{code}})",
+        "eventSceneListChanged": "Evento OBS: Lista de cenas alterada. Buscando cenas novamente.",
+        "errorProcessingMessage": "Erro ao processar mensagem OBS WebSocket: {{message}}. Dados: {{data}}",
+        "webSocketError": "Erro OBS WebSocket: {{error}}",
+        "authFailedReason": "Falha na Autenticação - senha incorreta ou autenticação necessária e não fornecida.",
+        "connectionClosedReasonCode": "Código: {{code}}{{wasClean}}",
+        "uncleanDisconnection": " (Desconexão não limpa)",
+        "connectionClosed": "Conexão OBS WebSocket Fechada. Motivo: {{reason}}",
+        "errorCreatingConnection": "Erro ao criar conexão OBS WebSocket: {{message}}",
+        "authGenerationError": "Erro na geração de autenticação OBS: {{message}}",
+        "cannotSendRequestNotConnected": "Não é possível enviar requisição '{{requestType}}': Não conectado ao OBS.",
+        "errorSendingRequest": "Erro ao enviar requisição OBS '{{requestType}}': {{message}}",
+        "requestTimeout": "Requisição OBS '{{requestType}}' (ID: {{id}}) esgotou o tempo.",
+        "connectionEstablishedFetchingData": "Conexão OBS totalmente estabelecida. Buscando dados iniciais...",
+        "errorPostConnectionSetup": "Erro durante configuração pós-conexão OBS (buscando cenas): {{message}}",
+        "connectionClosedOrLost": "Conexão OBS foi fechada ou perdida.",
+        "cannotFetchScenesNotConnected": "Não é possível buscar cenas OBS: Não conectado ao OBS.",
+        "fetchingScenes": "Buscando cenas OBS...",
+        "fetchedScenesCount": "{{count}} cenas buscadas do OBS.",
+        "failedToFetchScenes": "Falha ao buscar cenas OBS ou nenhuma cena retornada.",
+        "errorFetchingScenes": "Erro ao buscar cenas OBS: {{message}}",
+        "cannotHighlightNotConnected": "Não é possível destacar: Não conectado ao OBS.",
+        "highlightLayoutActiveManualLegacy": "A cena '{{sceneName}}' usa o novo Layout de Destaque. O botão de destaque manual pode ter efeito limitado ou ser substituído.",
+        "stoppingScreenShareForHighlight": "Um compartilhamento de tela está ativo ({{id}}). Parando antes de destacar.",
+        "cannotScreenShareNotConnected": "Não é possível iniciar compartilhamento de tela: Não conectado ao OBS.",
+        "unhighlightingForScreenShare": "Uma câmera está destacada ({{id}}). Removendo destaque antes de iniciar compartilhamento de tela.",
+        "cannotAddScreenShareNotConnected": "Não é possível adicionar compartilhamento de tela: Não conectado ao OBS.",
+        "cannotAddScreenShareNoRoom": "Não é possível adicionar compartilhamento de tela: Nome da Sala VDO.Ninja é obrigatório para URLs de compartilhamento de tela.",
+        "cannotAddScreenShareNoReactionLayoutScene": "Não é possível adicionar compartilhamento de tela: Nenhuma cena está configurada com um layout de 'Reação'.",
+        "addingUpdatingScreenShareToReactionScenes": "Adicionando/Atualizando fonte de compart. de tela '{{sourceName}}' (URL: {{url}}) para cenas de Reação. Criação primária em '{{primaryScene}}'. ({{count}} cenas no total)",
+        "reconfiguringExistingScreenShare": "Reconfigurando fonte de compart. de tela existente '{{oldName}}' para ser '{{newName}}'.",
+        "reconfiguredRenamedScreenShare": "Fonte de compart. de tela existente reconfigurada e renomeada para '{{sourceName}}'.",
+        "screenShareExistsUpdating": "Fonte de compart. de tela '{{sourceName}}' já existe. Atualizando suas configurações.",
+        "creatingNewScreenShareInScene": "Criando nova fonte de compart. de tela '{{sourceName}}' na cena '{{sceneName}}'.",
+        "ensuredTransformedScreenShareReaction": "Fonte de compartilhamento de tela '{{sourceName}}' assegurada e transformada na cena de Reação '{{sceneName}}'.",
+        "sourceFoundInSceneEnabled": "Fonte '{{sourceName}}' encontrada na cena '{{sceneName}}', ID do item: {{itemId}}. Garantindo que está ativada.",
+        "sourceAddedToScene": "Fonte '{{sourceName}}' adicionada à cena '{{sceneName}}', ID do item: {{itemId}}.",
+        "errorCreatingSceneItem": "Erro ao criar item de cena para '{{sourceName}}' em '{{sceneName}}': {{message}}",
+        "errorCheckingSceneForItem": "Erro ao verificar por '{{sourceName}}' na cena '{{sceneName}}': {{message}}",
+        "errorApplyingInitialTransform": "Erro ao aplicar transformação padrão inicial para '{{sourceName}}' em '{{sceneName}}': {{message}}",
+        "successConfigScreenShare": "Compartilhamento de tela configurado com sucesso para stream {{streamId}} ({{label}}).",
+        "errorAddingUpdatingScreenShare": "Erro ao adicionar/atualizar fonte de compart. de tela '{{sourceName}}': {{message}}.",
+        "cannotToggleHighlightNotConnected": "Não é possível alternar destaque: Não conectado ao OBS.",
+        "streamUnhighlighted": "Stream {{id}} sem destaque (renomeado de {{oldName}} para {{newName}}).",
+        "streamSuccessfullyUnhighlighted": "Stream {{id}} sem destaque com sucesso (renomeado para {{newName}}).",
+        "streamSuccessfullyHighlighted": "Stream {{id}} destacado com sucesso (renomeado para {{newName}}).",
+        "unhighlightError": "Não foi possível remover o destaque (renomear) de {{sourceName}}, pode não existir ou outro erro: {{message}}",
+        "highlightError": "Não foi possível destacar (renomear) {{sourceName}}, pode não existir ou outro erro: {{message}}",
+        "legacyHighlightUnhighlightOnRemove": "O stream {{id}} era um destaque legado. Removendo o destaque.",
+        "cannotAddStreamNotConnected": "Não é possível adicionar stream \"{{label}}\" ({{id}}) ao OBS: Não conectado ao OBS.",
+        "cannotAddStreamNoTargetSceneName": "Não é possível adicionar stream \"{{label}}\" ({{id}}): Nome da cena alvo OBS é obrigatório mas não definido (sem padrão e sem mapeamento).",
+        "foundExistingStandardSource": "Fonte padrão '{{sourceName}}' existente encontrada para o stream {{streamId}}.",
+        "foundExistingHighlightForConnectingStream": "Fonte OBS existente '{{sourceName}}' que corresponde à nomeação de destaque para o stream {{streamId}} conectado. Atualizando estado interno de destaque.",
+        "foundExistingHighlightedSource": "Fonte destacada '{{sourceName}}' existente encontrada para o stream {{streamId}}.",
+        "noExistingSourceFoundWillCreate": "Nenhuma fonte padrão ('{{baseSourceName}}') nem destacada ('{{highlightedSourceName}}') encontrada para o stream {{streamId}}. Será criada uma nova.",
+        "noExistingStandardSourceSamePrefix": "Fonte padrão '{{sourceName}}' não encontrada para o stream {{streamId}} (prefixo de destaque é o mesmo). Será criada uma nova.",
+        "errorGettingCanvasSize": "Erro ao obter tamanho da tela OBS: {{message}}. Usando padrão {{width}}x{{height}}.",
+        "sourceNotGlobalCreating": "Fonte '{{sourceName}}' não existe globalmente. Criando na cena '{{sceneName}}'.",
+        "sourceCreatedAddedToScene": "Fonte '{{sourceName}}' criada e adicionada à cena '{{sceneName}}'.",
+        "sourceGlobalUpdatingWithUrl": "Fonte '{{sourceName}}' já existe globalmente. Atualizando suas configurações. URL: {{url}}",
+        "sourceFoundAsItemInScene": "Fonte '{{sourceName}}' encontrada como item na cena '{{sceneName}}'.",
+        "sourceNotInSceneAdding": "Fonte '{{sourceName}}' não está na cena '{{sceneName}}'. Adicionando.",
+        "cloningToMainScene": "Clonando fonte '{{sourceName}}' para cena principal (dos checkboxes) '{{sceneName}}' devido à regra de mapeamento.",
+        "addingSourceToOtherScene": "Adicionando fonte '{{sourceName}}' como item para outra cena selecionada '{{sceneName}}'.",
+        "switchingProgramScene": "Mudando cena do programa atual OBS para '{{sceneName}}'.",
+        "successfullyProcessedStream": "Stream \"{{label}}\" ({{id}}) processado com sucesso, fonte OBS efetiva: '{{sourceName}}'.",
+        "errorManagingStream": "Erro ao gerenciar stream '{{sourceName}}' (\"{{label}}\") no OBS: {{message}}",
+        "applyTransformAndGridCalled": "applyTransformAndGrid chamado para {{sourceName}} em {{sceneName}}. Acionando atualização completa de layout para a cena.",
+        "triggeringLayoutUpdate": "Acionando atualização de layout para a cena '{{sceneName}}'...",
+        "gridFallbackSourceChanged": "As configurações de grid para '{{sourceGridScene}}' (candidata principal para fallback) foram alteradas. Acionando atualização para a cena Reaction/Highlight '{{dependentScene}}'.",
+        "noSceneItemsForLayout": "Nenhum item de cena encontrado na cena '{{sceneName}}' para atualização de layout.",
+        "applyingConfiguredLayout": "Aplicando layout '{{layoutType}}' à cena '{{sceneName}}'. ({{count}} itens)",
+        "unknownLayoutType": "Tipo de layout '{{layoutType}}' desconhecido para a cena '{{sceneName}}'. Aplicando dimensionamento padrão.",
+        "noSpecificLayoutApplyingDefault": "Nenhum layout específico para a cena '{{sceneName}}'. Aplicando dimensionamento padrão de fonte ('{{sizing}}').",
+        "errorTriggeringLayoutUpdate": "Erro durante a atualização de layout para a cena '{{sceneName}}': {{message}}",
+        "applyingDefaultSizing": "Aplicando dimensionamento padrão de fonte ('{{sizing}}') para {{count}} itens na cena '{{sceneName}}'.",
+        "errorApplyingDefaultTransformItem": "Erro ao aplicar transformação padrão para {{sourceName}} em {{sceneName}}: {{message}}",
+        "noSourcesForGridLayout": "Nenhuma fonte de câmera VDO.Ninja para aplicar layout de Grade na cena '{{sceneName}}'.",
+        "applyingGridLayoutScene": "Aplicando Layout de Grade para {{count}} fontes de câmera VDO.Ninja na cena '{{sceneName}}'.",
+        "applyingGridSplitScreen": "Aplicando layout de grade de tela dividida para 2 câmeras à cena '{{sceneName}}'.",
+        "reactionMainNotFoundFallbackGrid": "Conteúdo principal para layout de Reação na cena '{{sceneName}}' não encontrado/visível. Aplicando grade de fallback de câmeras.",
+        "highlightMainNotFoundFallbackGrid": "Conteúdo principal para layout de Destaque na cena '{{sceneName}}' não encontrado/visível. Aplicando grade de fallback de câmeras.",
+        "usingGridSceneFallbackSettings": "Usando configurações de grade da primeira cena 'Grade' configurada ('{{sceneName}}') como fallback para '{{targetScene}}'.",
+        "usingDefaultGridFallbackSettings": "Nenhuma cena de layout 'Grade' encontrada. Usando configurações de grade padrão como fallback para '{{targetScene}}'.",
+        "applyingFallbackGridToCameras": "Aplicando layout de Grade de fallback para {{count}} fontes de câmera na cena '{{sceneName}}'.",
+        "noCamerasForFallbackGridHidingAll": "Nenhum item de câmera para exibir na grade de fallback para a cena '{{sceneName}}'. Todas as fontes VDO nesta cena serão ocultadas.",
+        "cannotRemoveStreamNotConnected": "Não é possível remover stream {{id}} do OBS: Não conectado ao OBS.",
+        "triggeredRemoval": "Remoção acionada por usuário ou automaticamente do stream '{{id}}' do OBS. Fonte base: '{{baseName}}'.",
+        "streamScreenSharingRemoving": "Stream {{id}} estava ativamente compartilhando tela. Iniciando remoção do compartilhamento de tela.",
+        "finishedRemovingSourceItems": "Concluída remoção de itens de fonte para stream {{id}} das cenas OBS especificadas.",
+        "cannotRemoveScreenShareNotConnected": "Não é possível remover compartilhamento de tela: Não conectado ao OBS.",
+        "attemptingRemoveScreenShareSource": "Tentando remover completamente fonte de compart. de tela '{{sourceName}}' do OBS (todas as cenas e entrada).",
+        "removingGlobalInput": "Removendo entrada global '{{sourceName}}' do OBS.",
+        "successfullyRemovedInput": "Entrada '{{sourceName}}' removida com sucesso.",
+        "errorScreenShareRemovalProcess": "Erro durante processo de remoção de compart. de tela para '{{sourceName}}': {{message}}",
+        "removingSourceItemFromScene": "Removendo item de fonte '{{sourceName}}' (ID: {{itemId}}) da cena '{{sceneName}}'.",
+        "errorTryingRemoveSourceItem": "Erro ao tentar remover item de fonte '{{sourceName}}' da cena '{{sceneName}}': {{message}}",
+        "codecChangedUpdatingSources": "Codec alterado para: {{codec}}. Atualizando fontes OBS...",
+        "codecChangedNotConnected": "OBS não está conectado. As fontes não serão atualizadas com o novo codec até reconexão e uma nova ação.",
+        "sourceUpdatedWithUrlAndCss": "Fonte '{{sourceName}}' atualizada com URL: {{url}} e CSS personalizado.",
+        "screenShareSourceUpdatedWithUrlAndCss": "Fonte de compart. de tela '{{sourceName}}' atualizada com URL: {{url}} e CSS personalizado.",
+        "codecUpdateComplete": "Atualização de codec para fontes OBS completa.",
+        "codecCssUpdateComplete": "Atualização de Codec/CSS para fontes OBS completa.",
+        "inputNameChanged": "Evento OBS: Nome da entrada alterado de '{{oldName}}' para '{{newName}}'. Verificando cenas relevantes para atualizações de layout.",
+        "foundPreExistingHighlight": "Fonte destacada pré-existente encontrada no OBS: '{{sourceName}}'. Definindo destaque ativo para o ID de stream: {{streamId}}.",
+        "errorCheckingMainContentEnabled": "Erro ao verificar se o conteúdo principal {{sourceName}} está ativo: {{message}}"
+    }
+  }
+}
diff --git a/obs/locales/ru.json b/obs/locales/ru.json
new file mode 100644
index 0000000..e4aa933
--- /dev/null
+++ b/obs/locales/ru.json
@@ -0,0 +1,312 @@
+{
+  "pageTitle": "VDO.Ninja Панель управления OBS",
+  "mainHeading": "VDO.Ninja Управление OBS",
+  "languageSwitcher": {
+    "label": "Язык:"
+  },
+  "collapsible": {
+    "clickToExpand": "Нажмите для раскрытия",
+    "clickToCollapse": "Нажмите для сворачивания"
+  },
+  "customCss": {
+    "title": "Пользовательский CSS",
+    "label": "Введите свой пользовательский CSS здесь:",
+    "description": "Этот CSS будет применен к источникам."
+  },
+  "obsConnection": {
+    "title": "Подключение WebSocket OBS",
+    "websocketUrlLabel": "URL WebSocket:",
+    "passwordLabel": "Пароль:",
+    "cameraPrefixLabel": "Общий префикс камеры:",
+    "reactionPrefixLabel": "Префикс реакции: VDO.",
+    "highlightPrefixLabel": "Префикс выделения: VDO.",
+    "reactionPrefixDynamicLabel": "Префикс реакции: {{prefix}}{{separator}}{{subPrefix}}",
+    "highlightPrefixDynamicLabel": "Префикс выделения: {{prefix}}{{separator}}{{subPrefix}}",
+    "connectButton": "Подключить",
+    "disconnectButton": "Отключить",
+    "statusDisconnected": "Статус: Отключено",
+    "statusConnected": "Статус: Подключено",
+    "statusConnecting": "Статус: Подключение...",
+    "statusError": "Статус: Ошибка",
+    "statusErrorUrlMissing": "Статус: Ошибка - URL отсутствует",
+    "statusErrorTimeout": "Статус: Ошибка - Тайм-аут подключения",
+    "statusErrorCameraPrefixMissing": "Статус: Ошибка - Префикс камеры отсутствует"
+  },
+  "vdoNinjaSettings": {
+    "title": "Настройки VDO.Ninja",
+    "baseUrlLabel": "Базовый URL VDO.Ninja:",
+    "baseUrlPlaceholder": "https://vdo.ninja",
+    "roomNameLabel": "Название комнаты:",
+    "roomNamePlaceholder": "напр., МояКомнатаNinja",
+    "passwordLabel": "Пароль:",
+    "passwordPlaceholder": "Комната или &password",
+    "streamIdsLabel": "ID потоков:",
+    "streamIdsPlaceholder": "streamId1,streamId2",
+    "roomOrStreamIdsNeeded": "Требуется название комнаты или ID потока",
+    "connectButton": "Подключить",
+    "disconnectButton": "Отключить",
+    "cancelButton": "Отмена",
+    "statusDisconnected": "Статус: Отключено",
+    "statusConnected": "Статус: Подключено",
+    "statusConnecting": "Статус: Подключение...",
+    "statusConnectionFailed": "Статус: Сбой подключения",
+    "statusConnectionLost": "Статус: Соединение потеряно"
+  },
+  "streamIdMappings": {
+    "title": "Сопоставления ID потоков",
+    "addNewMappingButton": "Добавить новое сопоставление",
+    "ruleTitle": "Правило сопоставления потока",
+    "streamIdPlaceholder": "ID потока",
+    "streamIdTooltip": "ID потока VDO.Ninja",
+    "labelPlaceholder": "Метка (необязательно)",
+    "labelTooltip": "Метка потока VDO.Ninja",
+    "matchTypeTooltip": "Как сопоставить поток",
+    "matchType": {
+        "idOnly": "Только ID",
+        "labelOnly": "Только метка",
+        "bothRequired": "Оба обязательны",
+        "eitherMatch": "Любое совпадение"
+    },
+    "targetSceneTooltip": "Целевая сцена OBS",
+    "selectSceneOption": "Выберите сцену...",
+    "removeRuleTooltip": "Удалить это правило сопоставления",
+    "cloneToMainSceneLabel": "Клонировать в основную сцену",
+    "switchToSceneOnAddLabel": "Переключиться на сцену при добавлении",
+    "ruleDescription": "Определите, как входящие потоки направляются в сцены OBS."
+  },
+  "obsTargetSettings": {
+    "title": "Настройки цели OBS",
+    "sourceCreationScenesLabel": "Сцены для создания источников:",
+    "sourceCreationScenesDesc": "Выберите одну или несколько сцен. Первая будет основной, остальные для копирования.",
+    "loadingScenes": "Загрузка сцен...",
+    "noScenesFound": "Сцены не найдены",
+    "refetchScenesButton": "Перезагрузить сцены",
+    "screenShareSettings": {
+        "title": "Настройки демонстрации экрана:",
+        "widthLabel": "Ширина:",
+        "heightLabel": "Высота:",
+        "resolutionNote": "Это разрешение будет использоваться для источников демонстрации экрана в сценах с макетом 'Реакция'."
+    },
+    "autoAddSourcesLabel": "Автоматически добавлять новые потоки как источники",
+    "autoRemoveSourcesLabel": "Автоматически удалять источники при отключении",
+    "newSourceSizing": {
+        "label": "Размер источника по умолчанию:",
+        "defaultSizeOption": "По умолчанию (1920x1080 в 0,0)",
+        "bestFitOption": "Наилучшее вписывание (Сохранить пропорции)",
+        "stretchToFillOption": "Растянуть для заполнения экрана",
+        "overrideNote": "Конкретные макеты, определенные в разделе \"Макеты\", переопределят их для этих сцен."
+    },
+    "codec": {
+        "label": "Кодек:",
+        "noneOption": "нет",
+        "learnMoreTitle": "Узнать больше о параметрах кодека"
+    }
+  },
+  "sceneLayouts": {
+    "title": "Макеты сцен",
+    "addNewLayoutButton": "Добавить новый макет",
+    "description": "Определите автоматические макеты для конкретных сцен OBS. Они переопределят размер источника по умолчанию для настроенных сцен.",
+    "sceneLabel": "Сцена:",
+    "selectSceneOption": "Выберите сцену...",
+    "layoutLabel": "Макет:",
+    "selectLayoutOption": "Выберите макет...",
+    "layoutTypes": {
+        "grid": "Сетка",
+        "reaction": "Реакция",
+        "highlight": "Выделение"
+    },
+    "noActiveLayouts": "Нет активных макетов",
+    "removeLayoutTooltip": "Удалить эту конфигурацию макета",
+    "sceneAlreadyConfiguredTooltip": "(Уже используется)",
+    "sceneAlreadyConfiguredAlert": "Сцена '{{sceneName}}' уже используется другой конфигурацией макета.",
+    "controls": {
+        "margin": "Поля",
+        "spacing": "Интервал",
+        "offsetX": "Смещение X",
+        "offsetY": "Смещение Y",
+        "gridSplitScreenTwoCameras": "Разделенный экран для 2 камер (Сетка)",
+        "distributeCameras": "Распределить камеры (Реакция/Выделение)"
+    }
+  },
+  "activeStreams": {
+    "title": "Активные потоки",
+    "noActiveStreams": "Нет активных потоков",
+    "streamIdLabel": "ID: {{id}}",
+    "labelLabel": "Метка: {{label}}",
+    "targetSceneLabelText": "Целевая сцена: {{sceneName}}",
+    "notSet": "Не задано",
+    "defaultSceneTag": "по умолчанию",
+    "mappedSceneTag": "сопоставлено",
+    "addedToObs": "✓ Добавлено в OBS",
+    "notInObs": "✗ Нет в OBS",
+    "buttons": {
+        "addToObs": "Добавить в OBS",
+        "removeFromObs": "Удалить из OBS",
+        "highlight": "Выделить",
+        "unhighlight": "Снять выделение",
+        "screenShare": "Демонстрация экрана",
+        "stopScreenShare": "Остановить демонстрацию экрана"
+    }
+  },
+  "log": {
+    "title": "Журнал"
+  },
+  "vdoNinja": {
+    "defaultStreamLabel": "Поток {{id}}"
+  },
+  "logMessages": {
+    "settingsSaved": "Настройки сохранены.",
+    "settingsLoaded": "Настройки загружены из localStorage.",
+    "customCssChangedWillApplyToSource": "Пользовательский CSS изменен. Он будет применен непосредственно к настройкам источника OBS при следующем создании/обновлении.",
+    "errorLoadingSettings": "Ошибка загрузки настроек из localStorage: {{message}}. Использование значений по умолчанию.",
+    "noSavedSettings": "Сохраненные настройки не найдены. Использование значений по умолчанию.",
+    "appInitialized": "VDO.Ninja OBS Control Dock инициализирован. Добро пожаловать!",
+    "jsShaLoaded": "Библиотека jsSHA успешно загружена (резервный вариант для Web Crypto).",
+    "errorLoadingJsSha": "Ошибка: Не удалось загрузить библиотеку jsSHA. Аутентификация OBS может не работать, если Web Crypto также недоступен.",
+    "loadedStreamMappings": "Загружено {{count}} сопоставлений потоков.",
+    "errorLoadingStreamMappings": "Ошибка загрузки сопоставлений потоков из localStorage: {{message}}",
+    "warningStreamMappingElementsNotFound": "Предупреждение: Не удалось найти все ожидаемые элементы в div UI сопоставления потока.",
+    "loadedLayoutConfigs": "Загружено {{count}} конфигураций макетов сцен.",
+    "errorLoadingLayoutConfigs": "Ошибка загрузки конфигураций макетов сцен: {{message}}",
+    "savedLayoutConfigs": "Сохранено {{count}} конфигураций макетов сцен.",
+    "errorSavingLayoutsDuplicateScene": "Ошибка сохранения макетов: Сцена '{{sceneName}}' настроена несколько раз. Убедитесь, что каждая сцена имеет только один макет.",
+    "layoutSceneNotFound": "Сохраненная сцена '{{sceneName}}' для макета не найдена в текущих сценах OBS.",
+    "errorHidingSource": "Ошибка скрытия элемента источника {{sourceName}} в {{sceneName}}: {{message}}",
+    "sceneAlreadyConfiguredError": "Сцена '{{sceneName}}' уже настроена для другого макета. Возврат выбора.",
+    "vdoNinja": {
+        "disconnected": "Отключено от VDO.Ninja.",
+        "alreadyConnected": "Уже подключено к VDO.Ninja.",
+        "errorRoomOrStreamIdNeeded": "Ошибка VDO.Ninja: Должно быть указано название комнаты или ID потока.",
+        "connectionTimeout": "Тайм-аут подключения VDO.Ninja. Нет активности от iframe.",
+        "roomOrStreamIdNeededForConnect": "VDO.Ninja: Должно быть указано название комнаты или конкретные ID потоков для подключения.",
+        "streamIdsEmptyAfterTrim": "VDO.Ninja: ID потоков предоставлены, но были пустыми после обрезки.",
+        "initializingIframe": "Инициализация iframe VDO.Ninja с URL: {{url}}",
+        "invalidBaseUrl": "Недействительный базовый URL VDO.Ninja в настройках: {{url}}",
+        "iframeConnectedActive": "Соединение iframe VDO.Ninja установлено и активно.",
+        "streamConnectedActive": "Поток VDO.Ninja подключен/активен: \"{{label}}\" (ID: {{id}})",
+        "autoAddingStream": "Автоматическое добавление потока {{id}} в OBS.",
+        "streamDisconnectedInactive": "Поток VDO.Ninja отключен/неактивен: \"{{label}}\" (ID: {{id}})",
+        "autoRemovingStream": "Автоматическое удаление потока {{id}} из OBS.",
+        "streamLabelUpdated": "Метка потока VDO.Ninja обновлена для ID {{id}}: \"{{newLabel}}\" (была \"{{oldLabel}}\")",
+        "connectionLostResetting": "Соединение VDO.Ninja потеряно (нет активности от iframe). Попытка сброса."
+    },
+    "obs": {
+        "disconnecting": "Отключение от OBS WebSocket...",
+        "errorCameraPrefixRequired": "Ошибка: Общий префикс камеры требуется для подключения OBS.",
+        "errorUrlRequired": "Ошибка: URL OBS WebSocket требуется.",
+        "attemptingConnection": "Попытка подключения к OBS WebSocket по адресу {{url}}...",
+        "connectionTimeout": "Тайм-аут попытки подключения OBS WebSocket.",
+        "connectionOpenedWaitingHello": "Соединение OBS WebSocket открыто. Ожидание Server Hello...",
+        "receivedHelloSendingIdentify": "Получен Hello от OBS. Отправка Identify...",
+        "authDataPrepared": "Данные аутентификации подготовлены для сообщения Identify.",
+        "warningAuthRequiredNoPassword": "Предупреждение: Сервер OBS требует аутентификацию, но пароль не предоставлен.",
+        "authSuccessConnected": "Аутентификация OBS WebSocket успешна! Соединение установлено.",
+        "requestError": "Ошибка запроса OBS (Тип: {{type}}, ID: {{id}}): {{error}} (Код: {{code}})",
+        "eventSceneListChanged": "Событие OBS: Список сцен изменен. Перезагрузка сцен.",
+        "errorProcessingMessage": "Ошибка обработки сообщения OBS WebSocket: {{message}}. Данные: {{data}}",
+        "webSocketError": "Ошибка OBS WebSocket: {{error}}",
+        "authFailedReason": "Ошибка аутентификации - неверный пароль или требуется аутентификация, но не предоставлена.",
+        "connectionClosedReasonCode": "Код: {{code}}{{wasClean}}",
+        "uncleanDisconnection": " (Некорректное отключение)",
+        "connectionClosed": "Соединение OBS WebSocket закрыто. Причина: {{reason}}",
+        "errorCreatingConnection": "Ошибка создания соединения OBS WebSocket: {{message}}",
+        "authGenerationError": "Ошибка генерации аутентификации OBS: {{message}}",
+        "cannotSendRequestNotConnected": "Невозможно отправить запрос '{{requestType}}': Не подключено к OBS.",
+        "errorSendingRequest": "Ошибка отправки запроса OBS '{{requestType}}': {{message}}",
+        "requestTimeout": "Тайм-аут запроса OBS '{{requestType}}' (ID: {{id}}).",
+        "connectionEstablishedFetchingData": "Соединение OBS полностью установлено. Получение начальных данных...",
+        "errorPostConnectionSetup": "Ошибка во время настройки после подключения OBS (получение сцен): {{message}}",
+        "connectionClosedOrLost": "Соединение OBS было закрыто или потеряно.",
+        "cannotFetchScenesNotConnected": "Невозможно получить сцены OBS: Не подключено к OBS.",
+        "fetchingScenes": "Получение сцен OBS...",
+        "fetchedScenesCount": "Получено {{count}} сцен из OBS.",
+        "failedToFetchScenes": "Не удалось получить сцены OBS или сцены не возвращены.",
+        "errorFetchingScenes": "Ошибка получения сцен OBS: {{message}}",
+        "cannotHighlightNotConnected": "Невозможно выделить: Не подключено к OBS.",
+        "highlightLayoutActiveManualLegacy": "Сцена '{{sceneName}}' использует новый макет выделения. Ручная кнопка выделения может иметь ограниченный эффект или быть заменена.",
+        "stoppingScreenShareForHighlight": "Демонстрация экрана активна ({{id}}). Остановка перед выделением.",
+        "cannotScreenShareNotConnected": "Невозможно начать демонстрацию экрана: Не подключено к OBS.",
+        "unhighlightingForScreenShare": "Камера выделена ({{id}}). Снятие выделения перед началом демонстрации экрана.",
+        "cannotAddScreenShareNotConnected": "Невозможно добавить демонстрацию экрана: Не подключено к OBS.",
+        "cannotAddScreenShareNoRoom": "Невозможно добавить демонстрацию экрана: Требуется название комнаты VDO.Ninja для URL демонстрации экрана.",
+        "cannotAddScreenShareNoReactionLayoutScene": "Невозможно добавить демонстрацию экрана: Нет сцен, настроенных с макетом 'Реакция'.",
+        "addingUpdatingScreenShareToReactionScenes": "Добавление/Обновление источника демонстрации экрана '{{sourceName}}' (URL: {{url}}) в сцены Реакция. Основное создание в '{{primaryScene}}'. ({{count}} сцен всего)",
+        "reconfiguringExistingScreenShare": "Переконфигурация существующего источника демонстрации экрана '{{oldName}}' на '{{newName}}'.",
+        "reconfiguredRenamedScreenShare": "Переконфигурирован и переименован существующий источник демонстрации экрана в '{{sourceName}}'.",
+        "screenShareExistsUpdating": "Источник демонстрации экрана '{{sourceName}}' уже существует. Обновление настроек.",
+        "creatingNewScreenShareInScene": "Создание нового источника демонстрации экрана '{{sourceName}}' в сцене '{{sceneName}}'.",
+        "ensuredTransformedScreenShareReaction": "Обеспечен и преобразован источник демонстрации экрана '{{sourceName}}' в сцене Реакция '{{sceneName}}'.",
+        "sourceFoundInSceneEnabled": "Источник '{{sourceName}}' найден в сцене '{{sceneName}}', ID элемента: {{itemId}}. Убеждаемся, что он включен.",
+        "sourceAddedToScene": "Источник '{{sourceName}}' добавлен в сцену '{{sceneName}}', ID элемента: {{itemId}}.",
+        "errorCreatingSceneItem": "Ошибка создания элемента сцены для '{{sourceName}}' в '{{sceneName}}': {{message}}",
+        "errorCheckingSceneForItem": "Ошибка проверки '{{sourceName}}' в сцене '{{sceneName}}': {{message}}",
+        "errorApplyingInitialTransform": "Ошибка применения начального преобразования по умолчанию к '{{sourceName}}' в '{{sceneName}}': {{message}}",
+        "successConfigScreenShare": "Демонстрация экрана успешно настроена для потока {{streamId}} ({{label}}).",
+        "errorAddingUpdatingScreenShare": "Ошибка добавления/обновления источника демонстрации экрана '{{sourceName}}': {{message}}.",
+        "cannotToggleHighlightNotConnected": "Невозможно переключить выделение: Не подключено к OBS.",
+        "streamUnhighlighted": "Выделение потока {{id}} снято (переименовано с {{oldName}} на {{newName}}).",
+        "streamSuccessfullyUnhighlighted": "Выделение потока {{id}} успешно снято (переименовано в {{newName}}).",
+        "streamSuccessfullyHighlighted": "Поток {{id}} успешно выделен (переименован в {{newName}}).",
+        "unhighlightError": "Не удалось снять выделение (переименовать) {{sourceName}}, возможно не существует или другая ошибка: {{message}}",
+        "highlightError": "Не удалось выделить (переименовать) {{sourceName}}, возможно не существует или другая ошибка: {{message}}",
+        "legacyHighlightUnhighlightOnRemove": "Поток {{id}} был выделен старым способом. Снятие выделения.",
+        "cannotAddStreamNotConnected": "Невозможно добавить поток \"{{label}}\" ({{id}}) в OBS: Не подключено к OBS.",
+        "cannotAddStreamNoTargetSceneName": "Невозможно добавить поток \"{{label}}\" ({{id}}): Требуется имя целевой сцены OBS, но не задано (нет по умолчанию и нет сопоставления).",
+        "foundExistingStandardSource": "Найден существующий стандартный источник '{{sourceName}}' для потока {{streamId}}.",
+        "foundExistingHighlightForConnectingStream": "Найден существующий источник OBS '{{sourceName}}', который соответствует именованию выделения для подключающегося потока {{streamId}}. Обновление внутреннего состояния выделения.",
+        "foundExistingHighlightedSource": "Найден существующий выделенный источник '{{sourceName}}' для потока {{streamId}}.",
+        "noExistingSourceFoundWillCreate": "Ни стандартный ('{{baseSourceName}}'), ни выделенный ('{{highlightedSourceName}}') источник не найден для потока {{streamId}}. Будет создан новый.",
+        "noExistingStandardSourceSamePrefix": "Стандартный источник '{{sourceName}}' не найден для потока {{streamId}} (префикс выделения такой же). Будет создан новый.",
+        "errorGettingCanvasSize": "Ошибка получения размера холста OBS: {{message}}. Использование по умолчанию {{width}}x{{height}}.",
+        "sourceNotGlobalCreating": "Источник '{{sourceName}}' не существует глобально. Создание в сцене '{{sceneName}}'.",
+        "sourceCreatedAddedToScene": "Источник '{{sourceName}}' создан и добавлен в сцену '{{sceneName}}'.",
+        "sourceGlobalUpdatingWithUrl": "Источник '{{sourceName}}' уже существует глобально. Обновление настроек. URL: {{url}}",
+        "sourceFoundAsItemInScene": "Источник '{{sourceName}}' найден как элемент в сцене '{{sceneName}}'.",
+        "sourceNotInSceneAdding": "Источник '{{sourceName}}' не в сцене '{{sceneName}}'. Добавление.",
+        "cloningToMainScene": "Клонирование источника '{{sourceName}}' в основную сцену (из флажков) '{{sceneName}}' из-за правила сопоставления.",
+        "addingSourceToOtherScene": "Добавление источника '{{sourceName}}' как элемента в другую выбранную сцену '{{sceneName}}'.",
+        "switchingProgramScene": "Переключение текущей программной сцены OBS на '{{sceneName}}'.",
+        "successfullyProcessedStream": "Поток успешно обработан \"{{label}}\" ({{id}}), эффективный источник OBS: '{{sourceName}}'.",
+        "errorManagingStream": "Ошибка управления потоком '{{sourceName}}' (\"{{label}}\") в OBS: {{message}}",
+        "applyTransformAndGridCalled": "applyTransformAndGrid вызван для {{sourceName}} в {{sceneName}}. Запуск полного обновления макета для сцены.",
+        "triggeringLayoutUpdate": "Запуск обновления макета для сцены '{{sceneName}}'...",
+        "gridFallbackSourceChanged": "Настройки сетки для '{{sourceGridScene}}' (основной резервный кандидат) изменены. Запуск обновления для сцены Реакция/Выделение '{{dependentScene}}'.",
+        "noSceneItemsForLayout": "Элементы сцены не найдены в сцене '{{sceneName}}' для обновления макета.",
+        "applyingConfiguredLayout": "Применение макета '{{layoutType}}' к сцене '{{sceneName}}'. ({{count}} элементов)",
+        "unknownLayoutType": "Неизвестный тип макета '{{layoutType}}' для сцены '{{sceneName}}'. Применение размера по умолчанию.",
+        "noSpecificLayoutApplyingDefault": "Нет конкретного макета для сцены '{{sceneName}}'. Применение размера источника по умолчанию ('{{sizing}}').",
+    "errorTriggeringLayoutUpdate": "Ошибка во время обновления макета для сцены '{{sceneName}}': {{message}}",
+    "applyingDefaultSizing": "Применение размера источника по умолчанию ('{{sizing}}') к {{count}} элементам в сцене '{{sceneName}}'.",
+    "errorApplyingDefaultTransformItem": "Ошибка применения преобразования по умолчанию к {{sourceName}} в {{sceneName}}: {{message}}",
+    "noSourcesForGridLayout": "Нет источников камер VDO.Ninja для применения макета Сетка в сцене '{{sceneName}}'.",
+    "applyingGridLayoutScene": "Применение макета Сетка к {{count}} источникам камер VDO.Ninja в сцене '{{sceneName}}'.",
+    "applyingGridSplitScreen": "Применение макета разделенного экрана для 2 камер к сцене '{{sceneName}}'.",
+    "reactionMainNotFoundFallbackGrid": "Основной контент для макета Реакция в сцене '{{sceneName}}' не найден/не виден. Применение резервной сетки камер.",
+    "highlightMainNotFoundFallbackGrid": "Основной контент для макета Выделение в сцене '{{sceneName}}' не найден/не виден. Применение резервной сетки камер.",
+    "usingGridSceneFallbackSettings": "Использование настроек сетки из первой настроенной сцены макета 'Сетка' ('{{sceneName}}') как резервный вариант для '{{targetScene}}'.",
+    "usingDefaultGridFallbackSettings": "Сцена макета 'Сетка' не найдена. Использование настроек сетки по умолчанию как резервный вариант для '{{targetScene}}'.",
+    "applyingFallbackGridToCameras": "Применение резервного макета Сетка к {{count}} источникам камер в сцене '{{sceneName}}'.",
+    "noCamerasForFallbackGridHidingAll": "Нет элементов камер для отображения в резервной сетке для сцены '{{sceneName}}'. Все источники VDO в этой сцене будут скрыты.",
+    "cannotRemoveStreamNotConnected": "Невозможно удалить поток {{id}} из OBS: Не подключено к OBS.",
+    "triggeredRemoval": "Удаление потока '{{id}}' из OBS инициировано пользователем или автоматически. Базовый источник: '{{baseName}}'.",
+    "streamScreenSharingRemoving": "Поток {{id}} активно демонстрировал экран. Начало удаления демонстрации экрана.",
+    "finishedRemovingSourceItems": "Завершено удаление элементов источника для потока {{id}} из указанных сцен OBS.",
+    "cannotRemoveScreenShareNotConnected": "Невозможно удалить демонстрацию экрана: Не подключено к OBS.",
+    "attemptingRemoveScreenShareSource": "Попытка полного удаления источника демонстрации экрана '{{sourceName}}' из OBS (все сцены и входы).",
+    "removingGlobalInput": "Удаление глобального входа '{{sourceName}}' из OBS.",
+    "successfullyRemovedInput": "Вход '{{sourceName}}' успешно удален.",
+    "errorScreenShareRemovalProcess": "Ошибка во время процесса удаления демонстрации экрана для '{{sourceName}}': {{message}}",
+    "removingSourceItemFromScene": "Удаление элемента источника '{{sourceName}}' (ID: {{itemId}}) из сцены '{{sceneName}}'.",
+    "errorTryingRemoveSourceItem": "Ошибка при попытке удалить элемент источника '{{sourceName}}' из сцены '{{sceneName}}': {{message}}",
+    "codecChangedUpdatingSources": "Кодек изменен на: {{codec}}. Обновление источников OBS...",
+    "codecChangedNotConnected": "OBS не подключен. Источники не будут обновлены с новым кодеком до переподключения и нового действия.",
+    "sourceUpdatedWithUrlAndCss": "Источник '{{sourceName}}' обновлен с URL: {{url}} и пользовательским CSS.",
+    "screenShareSourceUpdatedWithUrlAndCss": "Источник демонстрации экрана '{{sourceName}}' обновлен с URL: {{url}} и пользовательским CSS.",
+    "codecUpdateComplete": "Обновление кодека для источников OBS завершено.",
+    "codecCssUpdateComplete": "Обновление кодека/CSS для источников OBS завершено.",
+    "inputNameChanged": "Событие OBS: Имя входа изменено с '{{oldName}}' на '{{newName}}'. Проверка соответствующих сцен для обновлений макета.",
+    "foundPreExistingHighlight": "Найден предварительно существующий выделенный источник в OBS: '{{sourceName}}'. Установка активного выделения на ID потока: {{streamId}}.",
+    "errorCheckingMainContentEnabled": "Ошибка проверки включен ли основной контент {{sourceName}}: {{message}}"
+    }
+  }
+}
\ No newline at end of file
diff --git a/obs/locales/zh-CN.json b/obs/locales/zh-CN.json
new file mode 100644
index 0000000..e7ebb13
--- /dev/null
+++ b/obs/locales/zh-CN.json
@@ -0,0 +1,312 @@
+{
+  "pageTitle": "VDO.Ninja OBS 控制面板",
+  "mainHeading": "VDO.Ninja OBS 控制",
+  "languageSwitcher": {
+    "label": "语言："
+  },
+  "collapsible": {
+    "clickToExpand": "点击展开",
+    "clickToCollapse": "点击折叠"
+  },
+  "customCss": {
+    "title": "自定义 CSS",
+    "label": "在此输入您的自定义 CSS：",
+    "description": "此 CSS 将应用于源。"
+  },
+  "obsConnection": {
+    "title": "OBS WebSocket 连接",
+    "websocketUrlLabel": "WebSocket URL：",
+    "passwordLabel": "密码：",
+    "cameraPrefixLabel": "通用摄像头前缀：",
+    "reactionPrefixLabel": "反应前缀：VDO.",
+    "highlightPrefixLabel": "高亮前缀：VDO.",
+    "reactionPrefixDynamicLabel": "反应前缀：{{prefix}}{{separator}}{{subPrefix}}",
+    "highlightPrefixDynamicLabel": "高亮前缀：{{prefix}}{{separator}}{{subPrefix}}",
+    "connectButton": "连接",
+    "disconnectButton": "断开连接",
+    "statusDisconnected": "状态：已断开",
+    "statusConnected": "状态：已连接",
+    "statusConnecting": "状态：连接中...",
+    "statusError": "状态：错误",
+    "statusErrorUrlMissing": "状态：错误 - URL 缺失",
+    "statusErrorTimeout": "状态：错误 - 连接超时",
+    "statusErrorCameraPrefixMissing": "状态：错误 - 摄像头前缀缺失"
+  },
+  "vdoNinjaSettings": {
+    "title": "VDO.Ninja 设置",
+    "baseUrlLabel": "VDO.Ninja 基础 URL：",
+    "baseUrlPlaceholder": "https://vdo.ninja",
+    "roomNameLabel": "房间名称：",
+    "roomNamePlaceholder": "例如：MyNinjaRoom",
+    "passwordLabel": "密码：",
+    "passwordPlaceholder": "房间或 &password",
+    "streamIdsLabel": "流 ID：",
+    "streamIdsPlaceholder": "streamId1,streamId2",
+    "roomOrStreamIdsNeeded": "需要房间名称或流 ID",
+    "connectButton": "连接",
+    "disconnectButton": "断开连接",
+    "cancelButton": "取消",
+    "statusDisconnected": "状态：已断开",
+    "statusConnected": "状态：已连接",
+    "statusConnecting": "状态：连接中...",
+    "statusConnectionFailed": "状态：连接失败",
+    "statusConnectionLost": "状态：连接丢失"
+  },
+  "streamIdMappings": {
+    "title": "流 ID 映射",
+    "addNewMappingButton": "添加新映射",
+    "ruleTitle": "流映射规则",
+    "streamIdPlaceholder": "流 ID",
+    "streamIdTooltip": "VDO.Ninja 流 ID",
+    "labelPlaceholder": "标签（可选）",
+    "labelTooltip": "VDO.Ninja 流标签",
+    "matchTypeTooltip": "如何匹配流",
+    "matchType": {
+        "idOnly": "仅 ID",
+        "labelOnly": "仅标签",
+        "bothRequired": "两者都需要",
+        "eitherMatch": "任一匹配"
+    },
+    "targetSceneTooltip": "目标 OBS 场景",
+    "selectSceneOption": "选择场景...",
+    "removeRuleTooltip": "删除此映射规则",
+    "cloneToMainSceneLabel": "克隆到主场景",
+    "switchToSceneOnAddLabel": "添加时切换到场景",
+    "ruleDescription": "定义传入流如何路由到 OBS 场景。"
+  },
+  "obsTargetSettings": {
+    "title": "OBS 目标设置",
+    "sourceCreationScenesLabel": "源创建的场景：",
+    "sourceCreationScenesDesc": "选择一个或多个场景。第一个将作为主要场景，其他用于复制。",
+    "loadingScenes": "加载场景中...",
+    "noScenesFound": "未找到场景",
+    "refetchScenesButton": "重新获取场景",
+    "screenShareSettings": {
+        "title": "屏幕共享设置：",
+        "widthLabel": "宽度：",
+        "heightLabel": "高度：",
+        "resolutionNote": "此分辨率将用于具有"反应"布局的场景中的屏幕共享源。"
+    },
+    "autoAddSourcesLabel": "自动将新流添加为源",
+    "autoRemoveSourcesLabel": "断开连接时自动删除源",
+    "newSourceSizing": {
+        "label": "默认源大小：",
+        "defaultSizeOption": "默认（1920x1080 位于 0,0）",
+        "bestFitOption": "最佳适配（保持纵横比）",
+        "stretchToFillOption": "拉伸以填充屏幕",
+        "overrideNote": ""布局"部分中定义的特定布局将覆盖这些场景的设置。"
+    },
+    "codec": {
+        "label": "编解码器：",
+        "noneOption": "无",
+        "learnMoreTitle": "了解更多编解码器选项"
+    }
+  },
+  "sceneLayouts": {
+    "title": "场景布局",
+    "addNewLayoutButton": "添加新布局",
+    "description": "为特定 OBS 场景定义自动布局。这些将覆盖配置场景的默认源大小。",
+    "sceneLabel": "场景：",
+    "selectSceneOption": "选择场景...",
+    "layoutLabel": "布局：",
+    "selectLayoutOption": "选择布局...",
+    "layoutTypes": {
+        "grid": "网格",
+        "reaction": "反应",
+        "highlight": "高亮"
+    },
+    "noActiveLayouts": "无活动布局",
+    "removeLayoutTooltip": "删除此布局配置",
+    "sceneAlreadyConfiguredTooltip": "（已在使用中）",
+    "sceneAlreadyConfiguredAlert": "场景 '{{sceneName}}' 已被另一个布局配置使用。",
+    "controls": {
+        "margin": "边距",
+        "spacing": "间距",
+        "offsetX": "X 偏移",
+        "offsetY": "Y 偏移",
+        "gridSplitScreenTwoCameras": "2 个摄像头分屏（网格）",
+        "distributeCameras": "分布摄像头（反应/高亮）"
+    }
+  },
+  "activeStreams": {
+    "title": "活动流",
+    "noActiveStreams": "无活动流",
+    "streamIdLabel": "ID：{{id}}",
+    "labelLabel": "标签：{{label}}",
+    "targetSceneLabelText": "目标场景：{{sceneName}}",
+    "notSet": "未设置",
+    "defaultSceneTag": "默认",
+    "mappedSceneTag": "已映射",
+    "addedToObs": "✓ 已添加到 OBS",
+    "notInObs": "✗ 不在 OBS 中",
+    "buttons": {
+        "addToObs": "添加到 OBS",
+        "removeFromObs": "从 OBS 删除",
+        "highlight": "高亮",
+        "unhighlight": "取消高亮",
+        "screenShare": "屏幕共享",
+        "stopScreenShare": "停止屏幕共享"
+    }
+  },
+  "log": {
+    "title": "日志"
+  },
+  "vdoNinja": {
+    "defaultStreamLabel": "流 {{id}}"
+  },
+  "logMessages": {
+    "settingsSaved": "设置已保存。",
+    "settingsLoaded": "已从 localStorage 加载设置。",
+    "customCssChangedWillApplyToSource": "自定义 CSS 输入已更改。将在下次创建/更新时直接应用于 OBS 源设置。",
+    "errorLoadingSettings": "从 localStorage 加载设置时出错：{{message}}。使用默认值。",
+    "noSavedSettings": "未找到保存的设置。使用默认值。",
+    "appInitialized": "VDO.Ninja OBS 控制面板已初始化。欢迎使用！",
+    "jsShaLoaded": "jsSHA 库已成功加载（Web Crypto 的后备方案）。",
+    "errorLoadingJsSha": "错误：无法加载 jsSHA 库。如果 Web Crypto 也不可用，OBS 身份验证可能会失败。",
+    "loadedStreamMappings": "已加载 {{count}} 个流映射。",
+    "errorLoadingStreamMappings": "从 localStorage 加载流映射时出错：{{message}}",
+    "warningStreamMappingElementsNotFound": "警告：无法在流映射 UI div 中找到所有预期元素。",
+    "loadedLayoutConfigs": "已加载 {{count}} 个场景布局配置。",
+    "errorLoadingLayoutConfigs": "加载场景布局配置时出错：{{message}}",
+    "savedLayoutConfigs": "已保存 {{count}} 个场景布局配置。",
+    "errorSavingLayoutsDuplicateScene": "保存布局时出错：场景 '{{sceneName}}' 配置了多次。请确保每个场景只有一个布局。",
+    "layoutSceneNotFound": "为布局保存的场景 '{{sceneName}}' 在当前 OBS 场景中未找到。",
+    "errorHidingSource": "在 {{sceneName}} 中隐藏源项目 {{sourceName}} 时出错：{{message}}",
+    "sceneAlreadyConfiguredError": "场景 '{{sceneName}}' 已为另一个布局配置。恢复选择。",
+    "vdoNinja": {
+        "disconnected": "已断开与 VDO.Ninja 的连接。",
+        "alreadyConnected": "已连接到 VDO.Ninja。",
+        "errorRoomOrStreamIdNeeded": "VDO.Ninja 错误：必须提供房间名称或流 ID。",
+        "connectionTimeout": "VDO.Ninja 连接超时。未从 iframe 收到任何活动。",
+        "roomOrStreamIdNeededForConnect": "VDO.Ninja：必须提供房间名称或特定流 ID 才能连接。",
+        "streamIdsEmptyAfterTrim": "VDO.Ninja：提供了流 ID，但修剪后为空。",
+        "initializingIframe": "使用 URL 初始化 VDO.Ninja iframe：{{url}}",
+        "invalidBaseUrl": "设置中的 VDO.Ninja 基础 URL 无效：{{url}}",
+        "iframeConnectedActive": "VDO.Ninja iframe 连接已建立并激活。",
+        "streamConnectedActive": "VDO.Ninja 流已连接/激活：\"{{label}}\"（ID：{{id}}）",
+        "autoAddingStream": "自动将流 {{id}} 添加到 OBS。",
+        "streamDisconnectedInactive": "VDO.Ninja 流已断开/非活动：\"{{label}}\"（ID：{{id}}）",
+        "autoRemovingStream": "自动从 OBS 删除流 {{id}}。",
+        "streamLabelUpdated": "ID {{id}} 的 VDO.Ninja 流标签已更新：\"{{newLabel}}\"（原为 \"{{oldLabel}}\"）",
+        "connectionLostResetting": "VDO.Ninja 连接丢失（iframe 无活动）。尝试重置。"
+    },
+    "obs": {
+        "disconnecting": "正在断开 OBS WebSocket 连接...",
+        "errorCameraPrefixRequired": "错误：OBS 连接需要通用摄像头前缀。",
+        "errorUrlRequired": "错误：需要 OBS WebSocket URL。",
+        "attemptingConnection": "尝试连接到 OBS WebSocket：{{url}}...",
+        "connectionTimeout": "OBS WebSocket 连接尝试超时。",
+        "connectionOpenedWaitingHello": "OBS WebSocket 连接已打开。等待服务器 Hello...",
+        "receivedHelloSendingIdentify": "收到来自 OBS 的 Hello。发送 Identify...",
+        "authDataPrepared": "已为 Identify 消息准备身份验证数据。",
+        "warningAuthRequiredNoPassword": "警告：OBS 服务器需要身份验证，但未提供密码。",
+        "authSuccessConnected": "OBS WebSocket 身份验证成功！连接已建立。",
+        "requestError": "OBS 请求错误（类型：{{type}}，ID：{{id}}）：{{error}}（代码：{{code}}）",
+        "eventSceneListChanged": "OBS 事件：场景列表已更改。重新获取场景。",
+        "errorProcessingMessage": "处理 OBS WebSocket 消息时出错：{{message}}。数据：{{data}}",
+        "webSocketError": "OBS WebSocket 错误：{{error}}",
+        "authFailedReason": "身份验证失败 - 密码错误或需要身份验证但未提供。",
+        "connectionClosedReasonCode": "代码：{{code}}{{wasClean}}",
+        "uncleanDisconnection": "（非正常断开）",
+        "connectionClosed": "OBS WebSocket 连接已关闭。原因：{{reason}}",
+        "errorCreatingConnection": "创建 OBS WebSocket 连接时出错：{{message}}",
+        "authGenerationError": "OBS 身份验证生成错误：{{message}}",
+        "cannotSendRequestNotConnected": "无法发送请求 '{{requestType}}'：未连接到 OBS。",
+        "errorSendingRequest": "发送 OBS 请求 '{{requestType}}' 时出错：{{message}}",
+        "requestTimeout": "OBS 请求 '{{requestType}}'（ID：{{id}}）超时。",
+        "connectionEstablishedFetchingData": "OBS 连接已完全建立。获取初始数据...",
+        "errorPostConnectionSetup": "OBS 连接后设置期间出错（获取场景）：{{message}}",
+        "connectionClosedOrLost": "OBS 连接已关闭或丢失。",
+        "cannotFetchScenesNotConnected": "无法获取 OBS 场景：未连接到 OBS。",
+        "fetchingScenes": "正在获取 OBS 场景...",
+        "fetchedScenesCount": "从 OBS 获取了 {{count}} 个场景。",
+        "failedToFetchScenes": "无法获取 OBS 场景或未返回场景。",
+        "errorFetchingScenes": "获取 OBS 场景时出错：{{message}}",
+        "cannotHighlightNotConnected": "无法高亮：未连接到 OBS。",
+        "highlightLayoutActiveManualLegacy": "场景 '{{sceneName}}' 使用新的高亮布局。手动高亮按钮可能效果有限或被替代。",
+        "stoppingScreenShareForHighlight": "屏幕共享处于活动状态（{{id}}）。在高亮之前停止它。",
+        "cannotScreenShareNotConnected": "无法开始屏幕共享：未连接到 OBS。",
+        "unhighlightingForScreenShare": "摄像头被高亮（{{id}}）。在开始屏幕共享之前取消高亮。",
+        "cannotAddScreenShareNotConnected": "无法添加屏幕共享：未连接到 OBS。",
+        "cannotAddScreenShareNoRoom": "无法添加屏幕共享：屏幕共享 URL 需要 VDO.Ninja 房间名称。",
+        "cannotAddScreenShareNoReactionLayoutScene": "无法添加屏幕共享：没有配置"反应"布局的场景。",
+        "addingUpdatingScreenShareToReactionScenes": "向反应场景添加/更新屏幕共享源 '{{sourceName}}'（URL：{{url}}）。在 '{{primaryScene}}' 中主要创建。（共 {{count}} 个场景）",
+        "reconfiguringExistingScreenShare": "重新配置现有屏幕共享源 '{{oldName}}' 为 '{{newName}}'。",
+        "reconfiguredRenamedScreenShare": "已重新配置并重命名现有屏幕共享源为 '{{sourceName}}'。",
+        "screenShareExistsUpdating": "屏幕共享源 '{{sourceName}}' 已存在。更新其设置。",
+        "creatingNewScreenShareInScene": "在场景 '{{sceneName}}' 中创建新的屏幕共享源 '{{sourceName}}'。",
+        "ensuredTransformedScreenShareReaction": "确保并转换了反应场景 '{{sceneName}}' 中的屏幕共享源 '{{sourceName}}'。",
+        "sourceFoundInSceneEnabled": "在场景 '{{sceneName}}' 中找到源 '{{sourceName}}'，项目 ID：{{itemId}}。确保其已启用。",
+        "sourceAddedToScene": "源 '{{sourceName}}' 已添加到场景 '{{sceneName}}'，项目 ID：{{itemId}}。",
+        "errorCreatingSceneItem": "在 '{{sceneName}}' 中为 '{{sourceName}}' 创建场景项目时出错：{{message}}",
+        "errorCheckingSceneForItem": "在场景 '{{sceneName}}' 中检查 '{{sourceName}}' 时出错：{{message}}",
+        "errorApplyingInitialTransform": "将初始默认变换应用于 '{{sceneName}}' 中的 '{{sourceName}}' 时出错：{{message}}",
+        "successConfigScreenShare": "成功配置流 {{streamId}}（{{label}}）的屏幕共享。",
+        "errorAddingUpdatingScreenShare": "添加/更新屏幕共享源 '{{sourceName}}' 时出错：{{message}}。",
+        "cannotToggleHighlightNotConnected": "无法切换高亮：未连接到 OBS。",
+        "streamUnhighlighted": "流 {{id}} 取消高亮（从 {{oldName}} 重命名为 {{newName}}）",
+        "streamSuccessfullyUnhighlighted": "流 {{id}} 成功取消高亮（重命名为 {{newName}}）",
+        "streamSuccessfullyHighlighted": "流 {{id}} 成功高亮（重命名为 {{newName}}）",
+        "unhighlightError": "无法取消高亮（重命名）{{sourceName}}，可能不存在或其他错误：{{message}}",
+        "highlightError": "无法高亮（重命名）{{sourceName}}，可能不存在或其他错误：{{message}}",
+        "legacyHighlightUnhighlightOnRemove": "流 {{id}} 是旧版高亮。取消高亮。",
+        "cannotAddStreamNotConnected": "无法将流 \"{{label}}\"（{{id}}）添加到 OBS：未连接到 OBS。",
+        "cannotAddStreamNoTargetSceneName": "无法添加流 \"{{label}}\"（{{id}}）：需要目标 OBS 场景名称但未设置（无默认值且无映射）。",
+        "foundExistingStandardSource": "为流 {{streamId}} 找到现有标准源 '{{sourceName}}'。",
+        "foundExistingHighlightForConnectingStream": "找到与连接流 {{streamId}} 的高亮命名匹配的现有 OBS 源 '{{sourceName}}'。更新内部高亮状态。",
+        "foundExistingHighlightedSource": "为流 {{streamId}} 找到现有高亮源 '{{sourceName}}'。",
+        "noExistingSourceFoundWillCreate": "未找到流 {{streamId}} 的标准（'{{baseSourceName}}'）或高亮（'{{highlightedSourceName}}'）源。将创建新的。",
+        "noExistingStandardSourceSamePrefix": "未找到流 {{streamId}} 的标准源 '{{sourceName}}'（高亮前缀相同）。将创建新的。",
+        "errorGettingCanvasSize": "获取 OBS 画布大小时出错：{{message}}。使用默认 {{width}}x{{height}}。",
+        "sourceNotGlobalCreating": "源 '{{sourceName}}' 不存在于全局。在场景 '{{sceneName}}' 中创建它。",
+        "sourceCreatedAddedToScene": "源 '{{sourceName}}' 已创建并添加到场景 '{{sceneName}}'。",
+        "sourceGlobalUpdatingWithUrl": "源 '{{sourceName}}' 已全局存在。更新其设置。URL：{{url}}",
+        "sourceFoundAsItemInScene": "源 '{{sourceName}}' 作为项目在场景 '{{sceneName}}' 中找到。",
+        "sourceNotInSceneAdding": "源 '{{sourceName}}' 不在场景 '{{sceneName}}' 中。正在添加。",
+        "cloningToMainScene": "由于映射规则，将源 '{{sourceName}}' 克隆到主场景（从复选框）'{{sceneName}}'。",
+        "addingSourceToOtherScene": "将源 '{{sourceName}}' 作为项目添加到其他选定场景 '{{sceneName}}'。",
+        "switchingProgramScene": "切换 OBS 当前节目场景到 '{{sceneName}}'。",
+        "successfullyProcessedStream": "成功处理流 \"{{label}}\"（{{id}}），有效 OBS 源：'{{sourceName}}'。",
+        "errorManagingStream": "在 OBS 中管理流 '{{sourceName}}'（\"{{label}}\"）时出错：{{message}}",
+        "applyTransformAndGridCalled": "为 {{sceneName}} 中的 {{sourceName}} 调用了 applyTransformAndGrid。触发场景的完整布局更新。",
+        "triggeringLayoutUpdate": "触发场景 '{{sceneName}}' 的布局更新...",
+        "gridFallbackSourceChanged": "'{{sourceGridScene}}'（主要后备候选）的网格设置已更改。触发反应/高亮场景 '{{dependentScene}}' 的更新。",
+        "noSceneItemsForLayout": "在场景 '{{sceneName}}' 中未找到用于布局更新的场景项目。",
+        "applyingConfiguredLayout": "将 '{{layoutType}}' 布局应用于场景 '{{sceneName}}'。（{{count}} 个项目）",
+        "unknownLayoutType": "场景 '{{sceneName}}' 的未知布局类型 '{{layoutType}}'。应用默认大小。",
+        "noSpecificLayoutApplyingDefault": "场景 '{{sceneName}}' 没有特定布局。应用默认源大小（'{{sizing}}'）。",
+        "errorTriggeringLayoutUpdate": "场景 '{{sceneName}}' 的布局更新期间出错：{{message}}",
+        "applyingDefaultSizing": "将默认源大小（'{{sizing}}'）应用于场景 '{{sceneName}}' 中的 {{count}} 个项目。",
+        "errorApplyingDefaultTransformItem": "将默认变换应用于 {{sceneName}} 中的 {{sourceName}} 时出错：{{message}}",
+        "noSourcesForGridLayout": "场景 '{{sceneName}}' 中没有 VDO.Ninja 摄像头源来应用网格布局。",
+        "applyingGridLayoutScene": "将网格布局应用于场景 '{{sceneName}}' 中的 {{count}} 个 VDO.Ninja 摄像头源。",
+        "applyingGridSplitScreen": "将 2 摄像头分屏网格布局应用于场景 '{{sceneName}}'。",
+        "reactionMainNotFoundFallbackGrid": "在场景 '{{sceneName}}' 中未找到/不可见反应布局的主内容。应用摄像头的后备网格。",
+        "highlightMainNotFoundFallbackGrid": "在场景 '{{sceneName}}' 中未找到/不可见高亮布局的主内容。应用摄像头的后备网格。",
+        "usingGridSceneFallbackSettings": "使用第一个配置的"网格"布局场景（'{{sceneName}}'）的网格设置作为 '{{targetScene}}' 的后备。",
+        "usingDefaultGridFallbackSettings": "未找到"网格"布局场景。使用默认网格设置作为 '{{targetScene}}' 的后备。",
+        "applyingFallbackGridToCameras": "将后备网格布局应用于场景 '{{sceneName}}' 中的 {{count}} 个摄像头源。",
+        "noCamerasForFallbackGridHidingAll": "场景 '{{sceneName}}' 的后备网格中没有要显示的摄像头项目。此场景中的所有 VDO 源将被隐藏。",
+        "cannotRemoveStreamNotConnected": "无法从 OBS 删除流 {{id}}：未连接到 OBS。",
+        "triggeredRemoval": "用户或自动触发从 OBS 删除流 '{{id}}'。基础源：'{{baseName}}'。",
+        "streamScreenSharingRemoving": "流 {{id}} 正在积极共享屏幕。启动屏幕共享删除。",
+        "finishedRemovingSourceItems": "完成从指定 OBS 场景删除流 {{id}} 的源项目。",
+        "cannotRemoveScreenShareNotConnected": "无法删除屏幕共享：未连接到 OBS。",
+        "attemptingRemoveScreenShareSource": "尝试从 OBS 完全删除屏幕共享源 '{{sourceName}}'（所有场景和输入）。",
+        "removingGlobalInput": "从 OBS 删除全局输入 '{{sourceName}}'。",
+        "successfullyRemovedInput": "成功删除输入 '{{sourceName}}'。",
+        "errorScreenShareRemovalProcess": "'{{sourceName}}' 的屏幕共享删除过程中出错：{{message}}",
+        "removingSourceItemFromScene": "从场景 '{{sceneName}}' 删除源项目 '{{sourceName}}'（ID：{{itemId}}）。",
+        "errorTryingRemoveSourceItem": "尝试从场景 '{{sceneName}}' 删除源项目 '{{sourceName}}' 时出错：{{message}}",
+        "codecChangedUpdatingSources": "编解码器更改为：{{codec}}。更新 OBS 源...",
+        "codecChangedNotConnected": "OBS 未连接。在重新连接和新操作之前，源不会使用新编解码器更新。",
+        "sourceUpdatedWithUrlAndCss": "源 '{{sourceName}}' 已使用 URL：{{url}} 和自定义 CSS 更新。",
+        "screenShareSourceUpdatedWithUrlAndCss": "屏幕共享源 '{{sourceName}}' 已使用 URL：{{url}} 和自定义 CSS 更新。",
+        "codecUpdateComplete": "OBS 源的编解码器更新完成。",
+        "codecCssUpdateComplete": "OBS 源的编解码器/CSS 更新完成。",
+        "inputNameChanged": "OBS 事件：输入名称从 '{{oldName}}' 更改为 '{{newName}}'。检查相关场景以进行布局更新。",
+        "foundPreExistingHighlight": "在 OBS 中找到预先存在的高亮源：'{{sourceName}}'。将活动高亮设置为流 ID：{{streamId}}。",
+        "errorCheckingMainContentEnabled": "检查主内容 {{sourceName}} 是否已启用时出错：{{message}}"
+    }
+  }
+}
\ No newline at end of file
diff --git a/obs/simple.html b/obs/simple.html
new file mode 100644
index 0000000..107a79d
--- /dev/null
+++ b/obs/simple.html
@@ -0,0 +1,1503 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>VDO.Ninja OBS Control Dock</title>
+    <style>
+body { 
+    font-family: sans-serif; 
+    margin: 5px; 
+    background-color: #13141A; 
+    color: #e0e0e0;
+    font-size: 13px; 
+}
+.container { 
+    margin-bottom: 10px; 
+    padding: 8px; 
+    background-color: #272A33; 
+    border-radius: 5px; 
+    border: 1px solid #3a3a48;
+}
+.collapsible {
+    cursor: pointer;
+    user-select: none;
+    padding: 8px 0;
+    position: relative;
+    font-weight: bold;
+    background: rgba(255,255,255,0.03);
+    margin: -8px -8px 8px -8px;
+    padding-left: 12px;
+    border-bottom: 1px solid #3a3a48;
+}
+.collapsible::after {
+    content: '▼';
+    position: absolute;
+    right: 12px;
+    font-size: 12px;
+    color: #8a8a9a;
+    transition: transform 0.2s ease;
+}
+.collapsible.collapsed::after {
+    content: '►';
+    transform: none;
+}
+.collapsible:hover {
+    background: rgba(255,255,255,0.08);
+}
+.collapsible::before {
+    content: 'Click to ' attr(data-state);
+    position: absolute;
+    right: 30px;
+    font-size: 10px;
+    color: #666;
+    font-weight: normal;
+}
+.collapsible[data-state="expand"]::before {
+    content: 'Click to expand';
+}
+.collapsible[data-state="collapse"]::before {
+    content: 'Click to collapse';
+}
+.collapsible-content {
+    max-height: 1000px;
+    overflow: hidden;
+    transition: max-height 0.2s ease-out;
+    padding-top: 5px;
+}
+.collapsible-content.collapsed {
+    max-height: 0;
+    padding-top: 0;
+}
+label { 
+    display: block; 
+    margin-bottom: 5px; 
+}
+input[type="text"], input[type="password"], select {
+    width: calc(100% - 16px); 
+    padding: 5px; 
+    margin-bottom: 8px;
+    border: 1px solid #424254; 
+    border-radius: 3px; 
+    background-color: #3C404D; 
+    color: #e0e0e0;
+}
+select {
+    padding: 6px 5px;
+    height: auto;
+}
+button {
+    padding: 6px 10px; 
+    background-color: #3C404D; 
+    color: white;
+    border: none; 
+    border-radius: 3px; 
+    cursor: pointer; 
+    margin-right: 3px;
+    margin-bottom: 3px;
+    font-size: 12px;
+}
+button.connected { 
+    background-color: #4C80AF; 
+}
+button.disconnected { 
+    background-color: #484860;
+}
+button:hover { 
+    background-color: #5a5a7a; 
+}
+.blur-field {
+    filter: blur(5px);
+    transition: filter 0.2s ease;
+}
+.blur-field:focus {
+    filter: blur(0);
+}
+#vdoNinjaIframe { 
+    width: 1px; 
+    height: 1px; 
+    position: absolute; 
+    left: -1000px; 
+    top: -1000px; 
+    border: 0; 
+}
+.log-area {
+    height: 100px; 
+    background-color: #1a1a24; 
+    color: #ccc; 
+    border: 1px solid #424254;
+    overflow-y: scroll; 
+    padding: 5px; 
+    font-family: monospace; 
+    font-size: 0.9em;
+    margin-top: 5px; 
+    white-space: pre-wrap;
+}
+.status-indicator {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    margin-left: 5px;
+    background-color: #555;
+}
+.status-indicator.connected { 
+    background-color: #4C80AF; 
+}
+.status-indicator.error { 
+    background-color: #f44336; 
+}
+.stream-list { 
+    max-height: 120px; 
+    overflow-y: auto; 
+    background-color: #1a1a24; 
+    border: 1px solid #424254;
+    border-radius: 3px;
+    padding: 5px;
+    margin-top: 3px;
+}
+.stream-item {
+    padding: 4px;
+    border-bottom: 1px solid #3c3c4a;
+    font-size: 12px;
+    word-break: break-word;
+}
+.stream-item:last-child {
+    border-bottom: none;
+}
+h1, h2 {
+    color: #c8c8c8;
+    margin: 5px 0;
+    font-size: 1.1em;
+}
+h1 {
+    font-size: 1.2em;
+}
+small {
+    color: #8a8a9a;
+    font-size: 0.85em;
+}
+.add-stream-btn {
+    background-color: #4C80AF;
+    color: white;
+    padding: 2px 4px;
+    font-size: 11px;
+}
+.status-line {
+    font-size: 12px;
+    margin-top: 5px;
+    display: flex;
+    align-items: center;
+}
+input[type="checkbox"] {
+    accent-color: #4C80AF;
+    margin-right: 5px;
+}
+.checkbox-label {
+    display: flex;
+    align-items: center;
+    margin-bottom: 3px;
+}
+.checkbox-label input {
+    margin-right: 4px;
+}
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+::-webkit-scrollbar-track {
+    background: #1a1a24;
+    border-radius: 3px;
+}
+::-webkit-scrollbar-thumb {
+    background: #3C404D;
+    border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: #4C80AF;
+}
+* {
+    scrollbar-width: thin;
+    scrollbar-color: #3C404D #1a1a24;
+}
+.flex-row {
+    display: flex;
+    gap: 4px;
+    flex-wrap: wrap;
+}
+#obsSceneNameInput {
+    display: none !important;
+}
+#loadScenesBtn {
+    display: inline-block;
+    margin-left: 5px;
+    vertical-align: top;
+}
+    </style>
+</head>
+<body>
+    <h1>VDO.Ninja OBS Control</h1>
+
+    <div class="container">
+        <h2 class="collapsible" data-state="collapse">OBS WebSocket Connection</h2>
+        <div class="collapsible-content">
+            <label for="obsWsUrl">WebSocket URL:</label>
+            <input type="text" id="obsWsUrl" value="ws://localhost:4455">
+
+            <label for="obsWsPassword">Password:</label>
+            <input type="password" id="obsWsPassword" value="">
+
+            <div class="status-line">
+				<button id="obsConnectBtn">Connect to OBS</button>
+                <span id="obsConnectionStatus">Status: Disconnected</span>
+                <span id="obsStatusIndicator" class="status-indicator"></span>
+            </div>
+        </div>
+    </div>
+
+    <div class="container">
+        <h2 class="collapsible" data-state="collapse">VDO.Ninja Settings</h2>
+        <div class="collapsible-content">
+            <label for="vdoNinjaRoom">Room Name:</label>
+            <input type="text" id="vdoNinjaRoom" placeholder="e.g., MyNinjaRoom" class="blur-field">
+
+            <label for="vdoNinjaPassword">Password:</label>
+            <input type="password" id="vdoNinjaPassword" placeholder="Room or &password">
+
+            <label for="vdoNinjaStreamIds">Stream IDs:</label>
+            <input type="text" id="vdoNinjaStreamIds" placeholder="streamId1,streamId2" class="blur-field">
+            <small>Room Name or Stream ID(s) needed</small>
+        </div>
+    </div>
+
+    <div class="container">
+        <h2 class="collapsible" data-state="expand">OBS Target Settings</h2>
+        <div class="collapsible-content collapsed">
+            <label for="obsSceneSelect">Target Scene:</label>
+            <div style="display: flex; align-items: center; gap: 5px;">
+                <select id="obsSceneSelect" style="flex: 1;">
+                    <option value="">Select a scene...</option>
+                </select>
+                <button id="loadScenesBtn">Re-Fetch Scenes</button>
+            </div>
+            <input type="text" id="obsSceneNameInput" style="display:none;">
+
+            <label for="sourceSizing">New Source Sizing:</label>
+			
+			<select id="sourceSizing">
+				<option value="autoGrid">Auto Grid Layout</option>
+				<option value="bestFit">Best Fit (Preserve Aspect)</option>
+				<option value="stretchToFill">Stretch to Fill Screen</option>
+				<option value="defaultSize">Default (1920x1080 at 0,0)</option>
+			</select>
+
+            <div id="autoSourceOptions">
+                <label class="checkbox-label">
+                    <input type="checkbox" id="autoAddSources" checked>
+                    Auto-add new streams as sources
+                </label>
+                <label class="checkbox-label">
+                    <input type="checkbox" id="autoRemoveSources" checked>
+                    Auto-remove sources on disconnect
+                </label>
+            </div>
+        </div>
+    </div>
+
+    <div class="container">
+        <h2 class="collapsible" data-state="expand">Stream ID Mappings</h2>
+        <div class="collapsible-content collapsed">
+            <div id="streamMappingContainer">
+				<div id="streamMappings"></div>
+				<button id="addStreamMappingBtn">Add New Mapping</button>
+			</div>
+            </div>
+    </div>
+
+    <div class="container">
+        <h2 class="collapsible" data-state="collapse">Active Streams</h2>
+        <div class="collapsible-content">
+            <div id="streamList" class="stream-list">
+                <div class="stream-item">No active streams</div>
+            </div>
+        </div>
+    </div>
+
+    <iframe id="vdoNinjaIframe" allow="encrypted-media;sync-xhr;usb;web-share;cross-origin-isolated;midi *;geolocation;camera *;microphone *;fullscreen;picture-in-picture;display-capture;accelerometer;autoplay;gyroscope;screen-wake-lock;"></iframe>
+
+    <div class="container">
+        <h2 class="collapsible" data-state="expand">Log</h2>
+        <div class="collapsible-content collapsed">
+            <div id="logArea" class="log-area"></div>
+        </div>
+    </div>
+
+    <script>
+// DOM elements
+const obsWsUrlInput = document.getElementById('obsWsUrl');
+const obsWsPasswordInput = document.getElementById('obsWsPassword');
+const obsConnectBtn = document.getElementById('obsConnectBtn');
+const obsConnectionStatus = document.getElementById('obsConnectionStatus');
+const obsStatusIndicator = document.getElementById('obsStatusIndicator');
+
+const vdoNinjaRoomInput = document.getElementById('vdoNinjaRoom');
+const vdoNinjaPasswordInput = document.getElementById('vdoNinjaPassword');
+const vdoNinjaStreamIdsInput = document.getElementById('vdoNinjaStreamIds');
+const vdoNinjaIframe = document.getElementById('vdoNinjaIframe');
+
+const obsSceneNameInput = document.getElementById('obsSceneNameInput');
+const obsSceneSelect = document.getElementById('obsSceneSelect');
+const sourceSizingSelect = document.getElementById('sourceSizing');
+const autoAddSourcesCheckbox = document.getElementById('autoAddSources');
+const autoRemoveSourcesCheckbox = document.getElementById('autoRemoveSources');
+const streamListContainer = document.getElementById('streamList');
+const logArea = document.getElementById('logArea');
+const loadScenesBtn = document.getElementById('loadScenesBtn');
+let vdoNinjaConnected = false;
+
+// Set up collapsible sections
+document.querySelectorAll('.collapsible').forEach(header => {
+    header.addEventListener('click', function() {
+        this.classList.toggle('collapsed');
+        const content = this.nextElementSibling;
+        if (content.classList.contains('collapsible-content')) {
+            content.classList.toggle('collapsed');
+            // Update the data-state attribute
+            if (content.classList.contains('collapsed')) {
+                this.setAttribute('data-state', 'expand');
+            } else {
+                this.setAttribute('data-state', 'collapse');
+            }
+        }
+    });
+});
+
+const vdoNinjaConnectBtn = document.createElement('button');
+vdoNinjaConnectBtn.id = 'vdoNinjaConnectBtn';
+vdoNinjaConnectBtn.textContent = 'Connect to VDO.Ninja';
+vdoNinjaConnectBtn.style.marginTop = '5px';
+
+const vdoNinjaStatusIndicator = document.createElement('span');
+vdoNinjaStatusIndicator.id = 'vdoNinjaStatusIndicator';
+vdoNinjaStatusIndicator.className = 'status-indicator';
+
+const vdoNinjaConnectionStatus = document.createElement('span');
+vdoNinjaConnectionStatus.id = 'vdoNinjaConnectionStatus';
+vdoNinjaConnectionStatus.textContent = 'Status: Disconnected';
+vdoNinjaConnectionStatus.style.marginLeft = '5px';
+
+// Add these elements after the vdoNinjaPassword input
+const vdoNinjaSettingsContainer = document.querySelector('.container:nth-child(2)');
+const buttonsDiv = document.createElement('div');
+buttonsDiv.style.marginTop = '5px';
+buttonsDiv.className = 'status-line';
+buttonsDiv.appendChild(vdoNinjaConnectBtn);
+buttonsDiv.appendChild(vdoNinjaConnectionStatus);
+buttonsDiv.appendChild(vdoNinjaStatusIndicator);
+vdoNinjaSettingsContainer.querySelector('.collapsible-content').appendChild(buttonsDiv);
+
+vdoNinjaConnectBtn.addEventListener('click', () => {
+    if (vdoNinjaConnected) {
+        disconnectFromVdoNinja();
+    } else {
+        connectToVdoNinja();
+    }
+});
+
+// State variables
+let obs = null;
+let obsConnected = false;
+let activeStreams = {};
+let obsScenes = [];
+let requestCallbacks = {};
+
+let vdoNinjaLastActivityTime = 0;
+let vdoNinjaConnectionCheckTimer = null;
+
+// Helper functions
+function logMessage(message) {
+	console.log(message);
+	const timestamp = new Date().toLocaleTimeString();
+	logArea.innerHTML += `[${timestamp}] ${message}\n`;
+	logArea.scrollTop = logArea.scrollHeight;
+}
+
+function generateRequestId(type) {
+	return `${type}-${Date.now()}-${Math.floor(Math.random() * 1000)}`;
+}
+
+function toggleVdoNinjaInputs(disabled) {
+    vdoNinjaRoomInput.disabled = disabled;
+    vdoNinjaPasswordInput.disabled = disabled;
+    vdoNinjaStreamIdsInput.disabled = disabled;
+}
+function updateVdoNinjaButtonState(connected) {
+    vdoNinjaConnected = connected;
+    
+    if (connected) {
+        vdoNinjaConnectBtn.textContent = 'Disconnect';
+        vdoNinjaConnectBtn.classList.add('connected');
+        vdoNinjaConnectBtn.classList.remove('disconnected');
+        vdoNinjaConnectionStatus.textContent = 'Status: Connected';
+        vdoNinjaStatusIndicator.classList.add('connected');
+    } else {
+        vdoNinjaConnectBtn.textContent = 'Connect to VDO.Ninja';
+        vdoNinjaConnectBtn.classList.remove('connected');
+        vdoNinjaConnectBtn.classList.add('disconnected');
+        vdoNinjaConnectionStatus.textContent = 'Status: Disconnected';
+        vdoNinjaStatusIndicator.classList.remove('connected');
+    }
+    
+    // Toggle input fields based on connection state
+    toggleVdoNinjaInputs(connected);
+}
+
+function saveSettings() {
+    const settings = {
+        obsWsUrl: obsWsUrlInput.value,
+        obsWsPassword: obsWsPasswordInput.value,
+        vdoNinjaRoom: vdoNinjaRoomInput.value,
+        vdoNinjaPassword: vdoNinjaPasswordInput.value,
+        vdoNinjaStreamIds: vdoNinjaStreamIdsInput.value,
+        obsSceneName: obsSceneSelect.value,
+        sourceSizing: sourceSizingSelect.value,
+        autoAddSources: autoAddSourcesCheckbox.checked,
+        autoRemoveSources: autoRemoveSourcesCheckbox.checked,
+        vdoNinjaConnected: vdoNinjaConnected
+        // Removed cloneToMainScene if you choose to remove the global checkbox
+        // cloneToMainScene: document.getElementById('cloneToMainScene')?.checked || false 
+    };
+    localStorage.setItem('obsNinjaSettings', JSON.stringify(settings));
+    
+    const mappings = getStreamMappings();
+    localStorage.setItem('obsNinjaStreamMappings', JSON.stringify(mappings));
+}
+
+
+function calculateGridPositions(totalSources, canvasWidth, canvasHeight) {
+    const positions = [];
+    
+    let cols = Math.ceil(Math.sqrt(totalSources));
+    let rows = Math.ceil(totalSources / cols);
+    
+    const cellWidth = canvasWidth / cols;
+    const cellHeight = canvasHeight / rows;
+    
+    const lastRowItems = totalSources - ((rows - 1) * cols);
+    const lastRowOffset = (cols - lastRowItems) * (cellWidth / 2);
+    
+    for (let row = 0; row < rows; row++) {
+        for (let col = 0; col < cols; col++) {
+            const index = row * cols + col;
+            if (index < totalSources) {
+                let xPos = col * cellWidth;
+                if (row === rows - 1 && lastRowItems < cols) {
+                    xPos += lastRowOffset;
+                }
+                positions.push({
+                    x: xPos,
+                    y: row * cellHeight,
+                    width: cellWidth,
+                    height: cellHeight
+                });
+            }
+        }
+    }
+    return positions;
+}
+function disconnectFromVdoNinja() {
+    vdoNinjaIframe.src = 'about:blank'; 
+    if (vdoNinjaConnectionCheckTimer) {
+        clearTimeout(vdoNinjaConnectionCheckTimer);
+        vdoNinjaConnectionCheckTimer = null;
+    }
+    activeStreams = {};
+    updateStreamList();
+    updateVdoNinjaButtonState(false);
+    saveSettings();
+}
+
+function connectToVdoNinja() {
+    const room = vdoNinjaRoomInput.value.trim();
+    const streamIds = vdoNinjaStreamIdsInput.value.trim();
+
+    if (!room && !streamIds) {
+        logMessage("VDO.Ninja Error: Room Name or Stream ID(s) must be provided.");
+        return;
+    }
+
+    initializeVdoNinjaIframe();
+    vdoNinjaConnectionStatus.textContent = 'Status: Connecting...';
+    vdoNinjaConnectBtn.textContent = 'Cancel';
+    
+    if (vdoNinjaConnectionCheckTimer) {
+        clearTimeout(vdoNinjaConnectionCheckTimer);
+    }
+    vdoNinjaConnectionCheckTimer = setTimeout(() => {
+        if (Date.now() - vdoNinjaLastActivityTime > 10000) {
+            logMessage("VDO.Ninja connection timed out. No activity received.");
+            vdoNinjaConnectionStatus.textContent = 'Status: Connection Failed';
+            vdoNinjaConnectBtn.textContent = 'Connect to VDO.Ninja';
+        }
+    }, 10000);
+    toggleVdoNinjaInputs(true);
+    saveSettings();
+}
+
+function addNewStreamMapping(streamId = '', label = '', sceneName = '', matchType = 'streamId', shouldClone = true, shouldSwitch = false) {
+    const streamMappings = document.getElementById('streamMappings');
+    const mappingDiv = document.createElement('div');
+    mappingDiv.className = 'stream-mapping';
+    mappingDiv.style.margin = '5px 0';
+    
+    mappingDiv.innerHTML = `
+        <div style="margin-bottom: 5px;">
+            <label style="font-size: 11px; margin-bottom: 2px; display: block;">Stream Mapping</label>
+            <div class="flex-row" style="align-items: center; flex-wrap: nowrap; margin-bottom: 2px;">
+                <input type="text" placeholder="Stream ID" value="${streamId instanceof PointerEvent ? '' : streamId}" class="mapping-stream-id" style="width:80px; margin-right: 4px;">
+                <input type="text" placeholder="Label (optional)" value="${label}" class="mapping-label" style="width:120px; margin-right: 4px;">
+                <select class="mapping-match-type" style="width:90px; margin-right: 4px;">
+                    <option value="streamId" ${matchType === 'streamId' ? 'selected' : ''}>ID Only</option>
+                    <option value="label" ${matchType === 'label' ? 'selected' : ''}>Label Only</option>
+                    <option value="both" ${matchType === 'both' ? 'selected' : ''}>Both Required</option>
+                    <option value="either" ${matchType === 'either' ? 'selected' : ''}>Either Match</option>
+                </select>
+                <select class="mapping-scene-name" style="width:130px;">
+                    <option value="">Select a scene...</option>
+                </select>
+                <button class="remove-mapping-btn" style="width:auto; padding:3px 5px; margin-left: 4px;">×</button>
+            </div>
+            <div class="flex-row" style="margin-top: 3px; gap: 8px;">
+                <label class="checkbox-label" style="margin-bottom: 0;">
+                    <input type="checkbox" class="mapping-clone-to-main" ${shouldClone ? 'checked' : ''}>
+                    Clone to main scene
+                </label>
+                <label class="checkbox-label" style="margin-bottom: 0;">
+                    <input type="checkbox" class="mapping-switch-to-scene" ${shouldSwitch ? 'checked' : ''}>
+                    Switch to scene on add
+                </label>
+            </div>
+            <small style="color: #8a8a9a; font-size: 10px; display: block; margin-top: 2px;">
+                ID Only: Match by Stream ID only | Label Only: Match by label only | 
+                Both Required: Must match both | Either Match: Match if either matches
+            </small>
+        </div>
+    `;
+    
+    streamMappings.appendChild(mappingDiv);
+    const sceneDropdown = mappingDiv.querySelector('.mapping-scene-name');
+    
+    // Populate dropdown with existing scenes
+    populateSceneDropdown(obsScenes, sceneDropdown);
+    
+    // Set the scene name if provided and valid
+    if (sceneName && obsScenes.some(scene => scene.sceneName === sceneName)) {
+        sceneDropdown.value = sceneName;
+    }
+    
+    const removeBtn = mappingDiv.querySelector('.remove-mapping-btn');
+    removeBtn.addEventListener('click', () => {
+        mappingDiv.remove();
+        saveSettings();
+    });
+    
+    const inputs = mappingDiv.querySelectorAll('input, select');
+    inputs.forEach(input => {
+        input.addEventListener('change', saveSettings);
+    });
+}
+
+
+function setupStreamMappingUI() {
+    const streamMappingContainer = document.getElementById('streamMappingContainer');
+    const addStreamMappingBtn = document.getElementById('addStreamMappingBtn');
+    
+    // If you decide to remove the global "cloneToMainScene" checkbox, remove the following block
+    /*
+    const cloneCheckboxDiv = document.createElement('div');
+    cloneCheckboxDiv.innerHTML = `
+        <label class="checkbox-label">
+            <input type="checkbox" id="cloneToMainScene">
+            Also clone mapped streams to main scene
+        </label>
+    `;
+    // Ensure streamMappingContainer.parentNode exists if you keep this
+    if (streamMappingContainer.parentNode) {
+        streamMappingContainer.parentNode.insertAdjacentElement('afterend', cloneCheckboxDiv);
+        const cloneCheckbox = document.getElementById('cloneToMainScene');
+        if (cloneCheckbox) {
+            cloneCheckbox.addEventListener('change', saveSettings);
+        }
+    }
+    */
+    
+    // Corrected event listener for adding new stream mapping
+    addStreamMappingBtn.addEventListener('click', () => {
+        addNewStreamMapping(); // Call without arguments
+    });
+    
+    loadStreamMappings();
+}
+
+function loadSettings() {
+    const settingsJson = localStorage.getItem('obsNinjaSettings');
+    if (settingsJson) {
+        try {
+            const settings = JSON.parse(settingsJson);
+            obsWsUrlInput.value = settings.obsWsUrl || '';
+            obsWsPasswordInput.value = settings.obsWsPassword || '';
+            vdoNinjaRoomInput.value = settings.vdoNinjaRoom || '';
+            vdoNinjaPasswordInput.value = settings.vdoNinjaPassword || '';
+            vdoNinjaStreamIdsInput.value = settings.vdoNinjaStreamIds || '';
+            obsSceneSelect.value = settings.obsSceneName || '';
+            sourceSizingSelect.value = settings.sourceSizing || 'autoGrid';
+            autoAddSourcesCheckbox.checked = settings.autoAddSources !== false;
+            autoRemoveSourcesCheckbox.checked = settings.autoRemoveSources !== false;
+            
+            // Removed loading for 'cloneToMainScene' if you remove the global checkbox
+            /*
+            if (document.getElementById('cloneToMainScene') && typeof settings.cloneToMainScene !== 'undefined') {
+                document.getElementById('cloneToMainScene').checked = settings.cloneToMainScene;
+            }
+            */
+            
+            if (settings.vdoNinjaConnected) {
+                // connectToVdoNinja(); // User can reconnect manually
+            }
+        } catch (e) {
+            logMessage(`Error loading settings: ${e.message}`);
+            localStorage.removeItem('obsNinjaSettings');
+        }
+    } else {
+        sourceSizingSelect.value = 'autoGrid';
+    }
+    setupStreamMappingUI(); // Call this after other settings are potentially loaded
+}
+
+
+function updateStreamList() {
+    console.log("Updating stream list with:", activeStreams);
+    if (Object.keys(activeStreams).length === 0) {
+        streamListContainer.innerHTML = '<div class="stream-item">No active streams</div>';
+        return;
+    }
+
+    streamListContainer.innerHTML = '';
+    for (const streamId in activeStreams) {
+        const stream = activeStreams[streamId];
+        const streamDiv = document.createElement('div');
+        streamDiv.className = 'stream-item';
+        
+        const targetInfo = getTargetSceneForStream(streamId, stream.label);
+        const targetSceneName = targetInfo.scene; // This is the scene name string
+        const isDefaultScene = targetSceneName === getTargetScene();
+        
+        streamDiv.innerHTML = `
+            <div style="font-weight: bold;">${stream.label || streamId}</div>
+            <small>ID: ${streamId}${stream.label ? ` | Label: ${stream.label}` : ''}</small>
+            <small style="display: block; color: #8a8a9a;">
+                → Target Scene: ${targetSceneName} ${isDefaultScene ? '(default)' : '(mapped)'}
+            </small>
+            ${stream.sourceCreated ? '<span style="color:#4CAF50"> ✓ Added to OBS</span>' : ''}
+            <button class="add-stream-btn" data-stream-id="${streamId}" style="margin-top: 3px;">Add to OBS</button>
+        `;
+        streamListContainer.appendChild(streamDiv);
+
+        const btn = streamDiv.querySelector('.add-stream-btn');
+        btn.addEventListener('click', () => {
+            // Pass the targetInfo object which contains { scene: sceneName, mapping: mappingObject }
+            addStreamToObs(streamId, stream.label, targetInfo);
+        });
+    }
+    console.log("Stream list updated:", streamListContainer.innerHTML);
+}
+
+obsConnectBtn.addEventListener('click', () => {
+    if (obsConnected && obs) {
+        logMessage("Disconnecting from OBS WebSocket...");
+        if (obs) {
+            obs.close();
+            obs = null;
+        }
+    } else {
+        connectToOBS();
+    }
+});
+
+function getTargetSceneForStream(streamId, streamLabel = '') {
+    const mappings = getStreamMappings();
+    const defaultTargetScene = getTargetScene(); // The scene selected in the main "Target Scene" dropdown
+
+    for (const mapping of mappings) {
+        let isMatch = false;
+        switch (mapping.matchType) {
+            case 'streamId': isMatch = mapping.streamId && streamId === mapping.streamId; break;
+            case 'label':    isMatch = mapping.label && streamLabel && streamLabel === mapping.label; break;
+            case 'both':     isMatch = mapping.streamId && mapping.label && streamId === mapping.streamId && streamLabel === mapping.label; break;
+            case 'either':   isMatch = (mapping.streamId && streamId === mapping.streamId) || (mapping.label && streamLabel && streamLabel === mapping.label); break;
+        }
+        if (isMatch && mapping.sceneName) { // Ensure mapping has a scene
+            return { scene: mapping.sceneName, mapping: mapping }; // Return object with scene name and full mapping
+        }
+    }
+    return { scene: defaultTargetScene, mapping: null }; // Default to main target scene if no match or mapping has no scene
+}
+
+function updateSceneDropdowns() {
+    // Store current values before updating dropdowns
+    const currentMainValue = obsSceneSelect.value;
+    const mappingSelects = document.querySelectorAll('.mapping-scene-name');
+    const currentMappingValues = Array.from(mappingSelects).map(select => select.value);
+    
+    // Update main scene dropdown
+    populateSceneDropdown(obsScenes, obsSceneSelect);
+    
+    // Restore main scene selection if still valid
+    if (currentMainValue && obsScenes.some(scene => scene.sceneName === currentMainValue)) {
+        obsSceneSelect.value = currentMainValue;
+    }
+    
+    // Update and restore mapping scene dropdowns
+    mappingSelects.forEach((select, index) => {
+        populateSceneDropdown(obsScenes, select);
+        if (currentMappingValues[index] && obsScenes.some(scene => scene.sceneName === currentMappingValues[index])) {
+            select.value = currentMappingValues[index];
+        }
+    });
+}
+function loadStreamMappings() {
+    const settingsJson = localStorage.getItem('obsNinjaStreamMappings');
+    if (settingsJson) {
+        try {
+            const mappings = JSON.parse(settingsJson);
+            for (const mapping of mappings) {
+                addNewStreamMapping(
+                    mapping.streamId, 
+                    mapping.label, 
+                    mapping.sceneName, 
+                    mapping.matchType,
+                    mapping.cloneToMain !== undefined ? mapping.cloneToMain : true,
+                    mapping.switchToScene !== undefined ? mapping.switchToScene : false
+                );
+            }
+            
+            // If scenes are already loaded, update the dropdowns
+            if (obsScenes && obsScenes.length > 0) {
+                updateSceneDropdowns();
+            }
+        } catch (e) {
+            logMessage(`Error loading stream mappings: ${e.message}`);
+        }
+    }
+}
+function getStreamMappings() {
+    const mappings = [];
+    const mappingDivs = document.querySelectorAll('.stream-mapping');
+    mappingDivs.forEach(div => {
+        const streamId = div.querySelector('.mapping-stream-id').value.trim();
+        const label = div.querySelector('.mapping-label').value.trim();
+        const matchType = div.querySelector('.mapping-match-type').value;
+        const sceneName = div.querySelector('.mapping-scene-name').value.trim();
+        const cloneToMain = div.querySelector('.mapping-clone-to-main').checked;
+        const switchToScene = div.querySelector('.mapping-switch-to-scene').checked;
+        if (sceneName && (streamId || label)) { // Ensure a scene and some identifier exists
+            mappings.push({ streamId, label, matchType, sceneName, cloneToMain, switchToScene });
+        }
+    });
+    return mappings;
+}
+
+async function connectToOBS() {
+    let url = obsWsUrlInput.value.trim();
+    const password = obsWsPasswordInput.value;
+    if (!url) {
+        logMessage("Error: OBS WebSocket URL is required.");
+        return;
+    }
+    if (!url.startsWith('ws://') && !url.startsWith('wss://')) {
+        url = 'ws://' + url;
+        obsWsUrlInput.value = url; 
+    }
+    obsConnectionStatus.textContent = 'Status: Connecting...';
+    obsStatusIndicator.classList.remove('connected', 'error');
+    logMessage(`Attempting to connect to OBS at ${url}...`);
+    
+    const connectionTimeoutId = setTimeout(() => {
+        if (obs && obs.readyState !== WebSocket.OPEN) {
+            logMessage("Connection attempt timed out");
+            if (obs) { try { obs.close(); } catch (e) {} obs = null; }
+            obsConnectionStatus.textContent = 'Status: Error - Connection timed out';
+            obsStatusIndicator.classList.add('error');
+        }
+    }, 10000); 
+    
+    try {
+        obs = new WebSocket(url);
+        obs.onopen = () => logMessage("WebSocket connection opened. Waiting for Hello message...");
+        obs.onmessage = async (event) => {
+            try {
+                const message = JSON.parse(event.data);
+                if (message.op === 0) { // Hello
+                    logMessage("Received Hello from OBS WebSocket server");
+                    // logMessage(JSON.stringify(message)); // Optional: raw hello message
+                    try {
+                        const identifyPayload = { op: 1, d: { rpcVersion: 1, eventSubscriptions: (1 << 0) | (1 << 1) } };
+                        if (message.d && message.d.authentication) {
+                            const { challenge, salt } = message.d.authentication;
+                            if (password) {
+                                identifyPayload.d.authentication = await generateAuthResponse(password, salt, challenge);
+                                logMessage("Authentication data prepared");
+                            } else { logMessage("Warning: Server requires authentication but no password provided"); }
+                        }
+                        // logMessage("Sending Identify message: " + JSON.stringify(identifyPayload)); // Optional: raw identify
+                        obs.send(JSON.stringify(identifyPayload));
+                    } catch (error) {
+                        logMessage(`Error during authentication setup: ${error.message}`);
+                        if (obs) obs.close();
+                    }
+                } else if (message.op === 2) { // Identified (auth success)
+                    clearTimeout(connectionTimeoutId);
+                    logMessage("OBS Authentication successful!");
+                    obsConnected = true;
+                    obsConnectBtn.textContent = 'Disconnect';
+                    obsConnectBtn.classList.add('connected');
+                    obsConnectBtn.classList.remove('disconnected');
+                    obsConnectionStatus.textContent = 'Status: Connected';
+                    obsStatusIndicator.classList.add('connected');
+                    onObsConnected();
+                } else if (message.op === 7) { // RequestResponse
+                    if (message.d && message.d.requestId && requestCallbacks[message.d.requestId]) {
+                        requestCallbacks[message.d.requestId](message.d);
+                        delete requestCallbacks[message.d.requestId];
+                    }
+                    if (message.d && message.d.requestStatus && message.d.requestStatus.code !== 100) {
+                        logMessage(`OBS Request Error (${message.d.requestType || 'Unknown'}): ${message.d.requestStatus.comment || 'Unknown error'}`);
+                    }
+                } else if (message.op === 5) { // Event
+                    logMessage(`Received event: ${message.d ? message.d.eventType : 'Unknown'}`);
+                } else {
+                    // logMessage(`Received message op ${message.op}: ${JSON.stringify(message)}`); // Optional: other messages
+                }
+            } catch (error) { logMessage(`Error processing WebSocket message: ${error.message}`); }
+        };
+        obs.onerror = (error) => {
+            clearTimeout(connectionTimeoutId);
+            logMessage(`OBS WebSocket Error: ${error.message || 'Unknown WebSocket error'}`);
+            obsStatusIndicator.classList.add('error');
+            obsConnectionStatus.textContent = 'Status: Error';
+        };
+        obs.onclose = (event) => {
+            clearTimeout(connectionTimeoutId);
+            let closeReason = event.code ? `Code: ${event.code}` : 'Unknown reason';
+            if (event.code === 4009) closeReason = 'Authentication Failed - incorrect password';
+            logMessage(`OBS WebSocket Connection Closed. ${closeReason}`);
+            obsConnected = false;
+            obsConnectBtn.textContent = 'Connect to OBS';
+            obsConnectBtn.classList.remove('connected');
+            obsConnectBtn.classList.add('disconnected');
+            obsConnectionStatus.textContent = 'Status: Disconnected';
+            obsStatusIndicator.classList.remove('connected', 'error');
+            onObsDisconnected();
+        };
+    } catch (error) {
+        clearTimeout(connectionTimeoutId);
+        logMessage(`Error creating WebSocket connection: ${error.message}`);
+        obsConnectionStatus.textContent = 'Status: Error';
+        obsStatusIndicator.classList.add('error');
+    }
+}
+
+async function generateAuthResponse(password, salt, challenge) {
+    try {
+        const encoder = new TextEncoder();
+        const secretString = password + salt;
+        const secretData = encoder.encode(secretString);
+        let secretHash;
+        if (window.crypto && window.crypto.subtle) {
+            const hashBuffer = await window.crypto.subtle.digest('SHA-256', secretData);
+            secretHash = new Uint8Array(hashBuffer);
+        } else {
+            await loadJsShaLibrary(); // Ensure jsSHA is loaded
+            const shaObj = new jsSHA("SHA-256", "TEXT", { encoding: "UTF8" });
+            shaObj.update(secretString);
+            const hashHex = shaObj.getHash("HEX");
+            secretHash = new Uint8Array(hashHex.match(/.{1,2}/g).map(byte => parseInt(byte, 16)));
+        }
+        const secretBase64 = btoa(String.fromCharCode.apply(null, secretHash));
+        const authString = secretBase64 + challenge;
+        const authData = encoder.encode(authString);
+        let authHash;
+        if (window.crypto && window.crypto.subtle) {
+            const hashBuffer = await window.crypto.subtle.digest('SHA-256', authData);
+            authHash = new Uint8Array(hashBuffer);
+        } else {
+            // jsSHA already loaded
+            const shaObj = new jsSHA("SHA-256", "TEXT", { encoding: "UTF8" });
+            shaObj.update(authString);
+            const hashHex = shaObj.getHash("HEX");
+            authHash = new Uint8Array(hashHex.match(/.{1,2}/g).map(byte => parseInt(byte, 16)));
+        }
+        return btoa(String.fromCharCode.apply(null, authHash));
+    } catch (error) {
+        logMessage(`Auth generation error: ${error.message}`);
+        throw error;
+    }
+}
+
+function sendRequest(requestType, requestData = {}) {
+	return new Promise((resolve, reject) => {
+		if (!obsConnected || !obs) { reject(new Error("Not connected to OBS")); return; }
+		const requestId = generateRequestId(requestType);
+		requestCallbacks[requestId] = (response) => {
+			if (response.requestStatus.code === 100) resolve(response.responseData || {});
+			else reject(new Error(`Request ${requestType} failed: ${response.requestStatus.comment}`));
+		};
+		const request = { op: 6, d: { requestType, requestId, requestData } };
+		try { obs.send(JSON.stringify(request)); } 
+        catch (error) { delete requestCallbacks[requestId]; reject(error); }
+		setTimeout(() => {
+			if (requestCallbacks[requestId]) {
+				delete requestCallbacks[requestId];
+				reject(new Error(`Request timeout for ${requestType}`));
+			}
+		}, 5000);
+	});
+}
+
+function onObsConnected() {
+    logMessage("OBS Connected. Fetching scenes...");
+    
+    // Fetch scenes first, then handle VDO.Ninja connection
+    fetchObsScenes().then(() => {
+        // Now that scenes are loaded, check if VDO.Ninja should be reconnected
+        const settingsJson = localStorage.getItem('obsNinjaSettings');
+        if (settingsJson) {
+            try {
+                const settings = JSON.parse(settingsJson);
+                if (settings.vdoNinjaConnected && (settings.vdoNinjaRoom || settings.vdoNinjaStreamIds)) {
+                    connectToVdoNinja();
+                }
+            } catch (e) { 
+                logMessage(`Error re-connecting VDO.Ninja: ${e.message}`); 
+            }
+        }
+        
+        // Apply auto-grid after everything is loaded
+        if (sourceSizingSelect.value === 'autoGrid') {
+            setTimeout(rearrangeAllStreamsInScene, 1000, getTargetScene()); 
+        }
+    });
+}
+function onObsDisconnected() {
+    logMessage("OBS Disconnected.");
+    for (const streamId in activeStreams) {
+        activeStreams[streamId].sourceCreated = false;
+    }
+    updateStreamList();
+}
+
+async function fetchObsScenes() {
+    if (!obsConnected || !obs) return;
+    logMessage("Fetching OBS scenes...");
+    try {
+        const response = await sendRequest('GetSceneList');
+        if (response && response.scenes) {
+            obsScenes = response.scenes;
+            updateSceneDropdowns();
+            
+            // Properly restore main scene selection after scenes are loaded
+            const savedSettings = localStorage.getItem('obsNinjaSettings');
+            if (savedSettings) {
+                try {
+                    const settings = JSON.parse(savedSettings);
+                    if (settings.obsSceneName && obsScenes.some(s => s.sceneName === settings.obsSceneName)) {
+                        obsSceneSelect.value = settings.obsSceneName;
+                    }
+                } catch (e) {
+                    logMessage(`Error restoring scene selection: ${e.message}`);
+                }
+            }
+            
+            // Restore mapping scene selections after scenes are loaded
+            const savedMappings = localStorage.getItem('obsNinjaStreamMappings');
+            if (savedMappings) {
+                try {
+                    const mappings = JSON.parse(savedMappings);
+                    const mappingSceneSelects = document.querySelectorAll('.mapping-scene-name');
+                    mappingSceneSelects.forEach((select, index) => {
+                        if (mappings[index] && mappings[index].sceneName) {
+                            if (obsScenes.some(scene => scene.sceneName === mappings[index].sceneName)) {
+                                select.value = mappings[index].sceneName;
+                            }
+                        }
+                    });
+                } catch (e) {
+                    logMessage(`Error restoring mapping scene selections: ${e.message}`);
+                }
+            }
+        }
+    } catch (error) { 
+        logMessage(`Error fetching OBS scenes: ${error.message}`); 
+    }
+}
+
+
+function populateSceneDropdown(scenesData, selectElement = obsSceneSelect) {
+    const currentValue = selectElement.value;
+    selectElement.innerHTML = '<option value="">Select a scene...</option>';
+    
+    if (!scenesData || scenesData.length === 0) {
+        return;
+    }
+    
+    scenesData.forEach(scene => {
+        const option = document.createElement('option');
+        option.value = scene.sceneName;
+        option.textContent = scene.sceneName;
+        selectElement.appendChild(option);
+    });
+    
+    // Restore the value if it still exists in the list
+    if (currentValue && scenesData.some(scene => scene.sceneName === currentValue)) {
+        selectElement.value = currentValue;
+    }
+}
+
+function getTargetScene() { return obsSceneSelect.value || ''; }
+
+function getVdoNinjaViewUrl(streamId, includeCommonParams = true) {
+    const room = vdoNinjaRoomInput.value.trim();
+    const ninjaPassword = vdoNinjaPasswordInput.value;
+    let url = "https://vdo.ninja/?";
+    if (room) url += `view=${encodeURIComponent(streamId)}&solo&room=${encodeURIComponent(room)}`;
+    else url += `view=${encodeURIComponent(streamId)}`;
+    if (ninjaPassword) url += `&password=${encodeURIComponent(ninjaPassword)}`;
+    if (includeCommonParams) url += "&cleanoutput&proaudio&ab=160&transparent&autoplay&codec=h264";
+    return url;
+}
+
+function initializeVdoNinjaIframe() {
+    const room = vdoNinjaRoomInput.value.trim();
+    const streamIds = vdoNinjaStreamIdsInput.value.trim();
+    if (!room && !streamIds) { logMessage("VDO.Ninja: Room or Stream ID(s) needed."); return; }
+    let vdoNinjaUrl = "https://vdo.ninja/?";
+    if (room) {
+        vdoNinjaUrl += `room=${encodeURIComponent(room)}`;
+        if (streamIds) vdoNinjaUrl += `&view=${encodeURIComponent(streamIds.split(',').map(s => s.trim()).join(','))}&solo`;
+    } else if (streamIds) {
+        vdoNinjaUrl += `view=${encodeURIComponent(streamIds.split(',').map(s => s.trim()).join(','))}`;
+    }
+    if (vdoNinjaPasswordInput.value) vdoNinjaUrl += `&password=${encodeURIComponent(vdoNinjaPasswordInput.value)}`;
+    vdoNinjaUrl += "&cleanoutput&dataonly&nocursor&nopush&debug&noaudio&novideo&cors="+encodeURIComponent(window.location.origin);
+    logMessage(`Loading VDO.Ninja iframe: ${vdoNinjaUrl}`);
+    vdoNinjaIframe.src = 'about:blank'; 
+    vdoNinjaIframe.setAttribute('crossorigin', 'anonymous');
+    vdoNinjaIframe.setAttribute('allow', 'autoplay; camera; microphone; fullscreen; display-capture; clipboard-write');
+    // Sandbox might be too restrictive for some VDO.Ninja features, but good for security
+    // vdoNinjaIframe.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-popups'); 
+    setTimeout(() => { vdoNinjaIframe.src = vdoNinjaUrl; }, 10);
+    saveSettings();
+}
+
+window.addEventListener("message", (event) => {
+    if (!event.origin.startsWith("https://vdo.ninja") || event.source !== vdoNinjaIframe.contentWindow) return;
+    const data = event.data;
+    vdoNinjaLastActivityTime = Date.now();
+    if (!vdoNinjaConnected) {
+        updateVdoNinjaButtonState(true);
+        if (vdoNinjaConnectionCheckTimer) { clearTimeout(vdoNinjaConnectionCheckTimer); vdoNinjaConnectionCheckTimer = null; }
+        logMessage("VDO.Ninja connection established.");
+    }
+    // if (data.action !== 'view-stats-updated') console.log("VDO.Ninja message:", data);
+
+    if (data && data.streamID) {
+        const streamId = data.streamID;
+        const label = data.label || `Stream ${streamId}`;
+        
+        if ((data.action === "view-connection" && data.value === true) || 
+            (data.action === "guest-connected") || 
+            (data.action === "push-connection" && data.value === true)) {
+            logMessage(`VDO.Ninja stream connected: ${label} (ID: ${streamId})`);
+            activeStreams[streamId] = { label, sourceCreated: false, streamId, uuid: data.UUID || null, connected: true };
+            updateStreamList();
+            if (autoAddSourcesCheckbox.checked) {
+                const targetInfo = getTargetSceneForStream(streamId, label);
+                addStreamToObs(streamId, label, targetInfo);
+            }
+        } else if ((data.action === "view-connection" && data.value === false) || 
+                   (data.action === "push-connection" && data.value === false)) {
+            if (activeStreams[streamId]) {
+                logMessage(`VDO.Ninja stream disconnected: ${label} (ID: ${streamId})`);
+                if (autoRemoveSourcesCheckbox && autoRemoveSourcesCheckbox.checked) {
+                    removeStreamFromObs(streamId); // Pass targetInfo if available or let removeStreamFromObs determine it
+                }
+                delete activeStreams[streamId];
+                updateStreamList();
+            }
+        } else if (data.action === "view-connection-info" && data.value && data.value.label) {
+            if (activeStreams[streamId]) {
+                activeStreams[streamId].label = data.value.label;
+                updateStreamList();
+            }
+        }
+    }
+}, false);
+
+function startVdoNinjaConnectionMonitor() {
+    setInterval(() => {
+        if (vdoNinjaConnected && Date.now() - vdoNinjaLastActivityTime > 45000) {
+            logMessage("VDO.Ninja connection lost (no activity).");
+            vdoNinjaConnectionStatus.textContent = 'Status: Connection Lost';
+            vdoNinjaStatusIndicator.classList.remove('connected');
+            vdoNinjaConnectBtn.textContent = 'Reconnect';
+            // Consider calling disconnectFromVdoNinja() or parts of it if full reset is desired
+        }
+    }, 30000);
+}
+
+async function addStreamToObs(streamId, streamLabel, targetInfo = null) {
+    if (!obsConnected || !obs) { logMessage("Cannot add stream: Not connected to OBS."); return; }
+
+    const resolvedTargetInfo = targetInfo || getTargetSceneForStream(streamId, streamLabel);
+    const targetSceneName = resolvedTargetInfo.scene;
+    const mappingRule = resolvedTargetInfo.mapping;
+
+    if (!targetSceneName) { logMessage("Cannot add stream: Target OBS scene name is required."); return; }
+
+    const sourceName = `VDO.Ninja_${streamId}`;
+    const mainDefaultScene = getTargetScene();
+    
+    let shouldCloneThisStreamToMain = false;
+    if (mappingRule && mappingRule.sceneName !== mainDefaultScene && mappingRule.cloneToMain) {
+        shouldCloneThisStreamToMain = true;
+    }
+
+    let shouldSwitchToThisScene = false;
+    if (mappingRule && mappingRule.switchToScene) {
+        shouldSwitchToThisScene = true;
+    }
+
+    const vdoNinjaStreamUrl = getVdoNinjaViewUrl(streamId);
+    let canvasWidth = 1920, canvasHeight = 1080;
+    try {
+        const videoSettings = await sendRequest('GetVideoSettings');
+        if (videoSettings && videoSettings.baseWidth && videoSettings.baseHeight) {
+            canvasWidth = videoSettings.baseWidth; canvasHeight = videoSettings.baseHeight;
+        }
+    } catch (error) { logMessage(`Canvas size error: ${error.message}, using default.`); }
+
+    const inputSettings = { url: vdoNinjaStreamUrl, width: canvasWidth, height: canvasHeight, fps: 30, reroute_audio: true, restart_when_active: false, shutdown: false };
+
+    logMessage(`Adding source '${sourceName}' to scene '${targetSceneName}'. Cloning to main: ${shouldCloneThisStreamToMain}. Switching: ${shouldSwitchToThisScene}`);
+
+    try {
+        let sourceExistsGlobally = false;
+        let initialSceneItemId = null;
+        let clonedSceneItemId = null;
+
+        try {
+            const sources = await sendRequest('GetInputList');
+            sourceExistsGlobally = sources.inputs.some(input => input.inputName === sourceName);
+        } catch (error) { logMessage(`Error checking global source list: ${error.message}`); }
+
+        if (!sourceExistsGlobally) {
+            // Create the input and add it to the target scene
+            const createInputResponse = await sendRequest('CreateInput', { 
+                sceneName: targetSceneName,
+                inputName: sourceName, 
+                inputKind: 'browser_source', 
+                inputSettings, 
+                sceneItemEnabled: true 
+            });
+            logMessage(`Source '${sourceName}' created and added to scene '${targetSceneName}'.`);
+            
+            // Get the scene item ID that was just created
+            try {
+                const itemInfo = await sendRequest('GetSceneItemId', { 
+                    sceneName: targetSceneName, 
+                    sourceName: sourceName 
+                });
+                initialSceneItemId = itemInfo.sceneItemId;
+                logMessage(`Source item ID: ${initialSceneItemId}`);
+            } catch (e) {
+                logMessage(`Couldn't get scene item ID for new source: ${e.message}`);
+            }
+            
+            // Clone to main scene if needed
+            if (shouldCloneThisStreamToMain && mainDefaultScene && mainDefaultScene !== targetSceneName) {
+                try {
+                    const createCloneResponse = await sendRequest('CreateSceneItem', {
+                        sceneName: mainDefaultScene, 
+                        sourceName: sourceName
+                    });
+                    clonedSceneItemId = createCloneResponse.sceneItemId;
+                    logMessage(`Source '${sourceName}' cloned to main scene '${mainDefaultScene}'. Item ID: ${clonedSceneItemId}`);
+                } catch (error) {
+                    logMessage(`Error cloning source to main scene '${mainDefaultScene}': ${error.message}`);
+                }
+            }
+        } else {
+            // Update existing input settings
+            await sendRequest('SetInputSettings', { inputName: sourceName, inputSettings });
+            logMessage(`Settings updated for existing source '${sourceName}'.`);
+            
+            // Check if already in target scene
+            try {
+                const itemInfo = await sendRequest('GetSceneItemId', { sceneName: targetSceneName, sourceName: sourceName });
+                initialSceneItemId = itemInfo.sceneItemId;
+                logMessage(`Existing source '${sourceName}' already in scene '${targetSceneName}'. Item ID: ${initialSceneItemId}`);
+            } catch (e) {
+                if (e.message.toLowerCase().includes("not found")) {
+                    const createItemResponse = await sendRequest('CreateSceneItem', { sceneName: targetSceneName, sourceName: sourceName });
+                    initialSceneItemId = createItemResponse.sceneItemId;
+                    logMessage(`Existing source '${sourceName}' added to scene '${targetSceneName}'. Item ID: ${initialSceneItemId}`);
+                } else { throw e; }
+            }
+            
+            // Check if already in main scene or add if cloning
+            if (shouldCloneThisStreamToMain && mainDefaultScene && mainDefaultScene !== targetSceneName) {
+                try {
+                    const existingItemInfo = await sendRequest('GetSceneItemId', { sceneName: mainDefaultScene, sourceName: sourceName });
+                    clonedSceneItemId = existingItemInfo.sceneItemId;
+                    logMessage(`Source '${sourceName}' already in main scene '${mainDefaultScene}'. Item ID: ${clonedSceneItemId}`);
+                } catch (e) {
+                    if (e.message.toLowerCase().includes("not found")) {
+                        try {
+                            const createCloneResponse = await sendRequest('CreateSceneItem', { sceneName: mainDefaultScene, sourceName: sourceName });
+                            clonedSceneItemId = createCloneResponse.sceneItemId;
+                            logMessage(`Source '${sourceName}' cloned to main scene '${mainDefaultScene}'. Item ID: ${clonedSceneItemId}`);
+                        } catch (createError) {
+                            logMessage(`Error creating clone in main scene '${mainDefaultScene}': ${createError.message}`);
+                        }
+                    } else {
+                        logMessage(`Error checking main scene '${mainDefaultScene}': ${e.message}`);
+                    }
+                }
+            }
+        }
+
+        if (activeStreams[streamId]) activeStreams[streamId].sourceCreated = true;
+        updateStreamList();
+
+        // Apply transforms
+        if (initialSceneItemId) {
+            await applyTransformAndGrid(targetSceneName, sourceName, canvasWidth, canvasHeight, initialSceneItemId);
+        }
+
+        if (clonedSceneItemId) {
+            await applyTransformAndGrid(mainDefaultScene, sourceName, canvasWidth, canvasHeight, clonedSceneItemId);
+        }
+        
+        if (shouldSwitchToThisScene) {
+            await sendRequest('SetCurrentProgramScene', { sceneName: targetSceneName });
+            logMessage(`Switched to scene '${targetSceneName}'.`);
+        }
+
+    } catch (error) { 
+        logMessage(`Error adding stream '${sourceName}' to OBS: ${error.message}`); 
+        if (activeStreams[streamId]) activeStreams[streamId].sourceCreated = false;
+        updateStreamList();
+    }
+}
+
+async function applyTransformAndGrid(sceneName, sourceName, canvasWidth, canvasHeight, sceneItemId = null) {
+    if (!sceneName) {
+        logMessage(`Cannot apply transform: Scene name not provided for source '${sourceName}'.`);
+        return;
+    }
+    let itemIdToTransform = sceneItemId;
+
+    if (!itemIdToTransform) { // If ID not provided, try to fetch it
+        try {
+            logMessage(`Workspaceing scene item ID for '${sourceName}' in '${sceneName}' for transform (ID not passed).`);
+            const itemInfo = await sendRequest('GetSceneItemId', { sceneName, sourceName });
+            if (itemInfo && itemInfo.sceneItemId) {
+                itemIdToTransform = itemInfo.sceneItemId;
+            } else {
+                // This case should ideally not be hit if creation was successful
+                logMessage(`Could not find scene item ID for '${sourceName}' in '${sceneName}' (fetch attempt).`);
+                return; 
+            }
+        } catch (error) {
+            // This is where the user's logged error "OBS Request Error (GetSceneItemId): No scene items were found..." likely originated
+            logMessage(`Error fetching scene item ID for transform of '${sourceName}' in '${sceneName}': ${error.message}`);
+            return; 
+        }
+    }
+
+    // Proceed with itemIdToTransform
+    if (!itemIdToTransform) {
+        logMessage(`Cannot apply transform for '${sourceName}' in '${sceneName}': Valid Scene Item ID not available.`);
+        return;
+    }
+
+    if (sourceSizingSelect.value === 'autoGrid') {
+        // rearrangeAllStreamsInScene will handle transforms for all relevant items in the grid.
+        // It's generally better to call this once after all items are added/removed for a scene.
+        await rearrangeAllStreamsInScene(sceneName); 
+    } else {
+        try {
+            const transform = calculateTransform(sourceSizingSelect.value, canvasWidth, canvasHeight, canvasWidth, canvasHeight);
+            await sendRequest('SetSceneItemTransform', { sceneName, sceneItemId: itemIdToTransform, sceneItemTransform: transform });
+            logMessage(`Applied non-grid transform to '${sourceName}' (Item ID: ${itemIdToTransform}) in '${sceneName}'.`);
+        } catch (error) {
+            logMessage(`Error applying non-grid transform to '${sourceName}' (Item ID: ${itemIdToTransform}) in '${sceneName}': ${error.message}`);
+        }
+    }
+}
+
+
+async function rearrangeAllStreamsInScene(sceneName) {
+    if (!obsConnected || !obs || !sceneName || sourceSizingSelect.value !== 'autoGrid') return;
+    logMessage(`Rearranging streams in scene '${sceneName}' using autoGrid.`);
+    try {
+        let canvasWidth = 1920, canvasHeight = 1080;
+        try {
+            const videoSettings = await sendRequest('GetVideoSettings');
+            if (videoSettings && videoSettings.baseWidth && videoSettings.baseHeight) {
+                canvasWidth = videoSettings.baseWidth; canvasHeight = videoSettings.baseHeight;
+            }
+        } catch (error) { logMessage(`Canvas size error for rearrange: ${error.message}`); }
+
+        const sceneItemsResponse = await sendRequest('GetSceneItemList', { sceneName });
+        const vdoNinjaSourcesInScene = sceneItemsResponse.sceneItems.filter(item => 
+            item.sourceName.startsWith('VDO.Ninja_') && 
+            Object.values(activeStreams).some(as => `VDO.Ninja_${as.streamId}` === item.sourceName && as.connected) // Only active, connected VDO.Ninja streams
+        );
+
+        if (vdoNinjaSourcesInScene.length === 0) { 
+            logMessage(`No active VDO.Ninja sources found in scene '${sceneName}' to rearrange.`);
+            return;
+        }
+        
+        const positions = calculateGridPositions(vdoNinjaSourcesInScene.length, canvasWidth, canvasHeight);
+        for (let i = 0; i < vdoNinjaSourcesInScene.length; i++) {
+            const item = vdoNinjaSourcesInScene[i];
+            const transform = calculateTransform('autoGrid', canvasWidth, canvasHeight, canvasWidth, canvasHeight, positions[i]);
+            await sendRequest('SetSceneItemTransform', { sceneName, sceneItemId: item.sceneItemId, sceneItemTransform: transform });
+        }
+        logMessage(`Rearranged ${vdoNinjaSourcesInScene.length} sources in scene '${sceneName}'.`);
+    } catch (error) { logMessage(`Error rearranging streams in scene '${sceneName}': ${error.message}`); }
+}
+
+
+function calculateTransform(sizingMode, sourceWidth, sourceHeight, canvasWidth, canvasHeight, gridPosition = null) {
+    let transform = { alignment: 5, boundsType: "OBS_BOUNDS_NONE", boundsAlignment: 0, boundsWidth: sourceWidth, boundsHeight: sourceHeight, positionX: 0, positionY: 0, scaleX: 1.0, scaleY: 1.0, rotation: 0.0, cropTop: 0, cropBottom: 0, cropLeft: 0, cropRight: 0, sourceWidth, sourceHeight, width: sourceWidth, height: sourceHeight };
+    switch (sizingMode) {
+        case 'stretchToFill': transform.boundsType = "OBS_BOUNDS_STRETCH"; transform.boundsWidth = canvasWidth; transform.boundsHeight = canvasHeight; transform.width = canvasWidth; transform.height = canvasHeight; break;
+        case 'bestFit':       transform.boundsType = "OBS_BOUNDS_SCALE_INNER"; transform.boundsWidth = canvasWidth; transform.boundsHeight = canvasHeight; transform.width = canvasWidth; transform.height = canvasHeight; break;
+        case 'autoGrid':
+            if (gridPosition) {
+                transform.boundsType = "OBS_BOUNDS_SCALE_INNER"; // Fit within the grid cell
+                transform.positionX = gridPosition.x; transform.positionY = gridPosition.y;
+                transform.boundsWidth = gridPosition.width; transform.boundsHeight = gridPosition.height;
+                transform.width = gridPosition.width; transform.height = gridPosition.height;
+            } else { // Fallback if no grid position (shouldn't happen if called correctly)
+                transform.boundsType = "OBS_BOUNDS_SCALE_INNER"; transform.boundsWidth = canvasWidth; transform.boundsHeight = canvasHeight; transform.width = canvasWidth; transform.height = canvasHeight;
+            }
+            break;
+        case 'defaultSize':
+        default: transform.positionX = (canvasWidth - sourceWidth) / 2; transform.positionY = (canvasHeight - sourceHeight) / 2; break;
+    }
+    return transform;
+}
+
+async function removeStreamFromObs(streamId) {
+    if (!obsConnected || !obs) return;
+    const sourceName = `VDO.Ninja_${streamId}`;
+    logMessage(`Attempting to remove source '${sourceName}' from OBS.`);
+
+    const streamInfo = activeStreams[streamId];
+    const targetInfo = streamInfo ? getTargetSceneForStream(streamId, streamInfo.label) : getTargetSceneForStream(streamId, '');
+    
+    const scenesToCheck = new Set();
+    if (targetInfo.scene) scenesToCheck.add(targetInfo.scene); // Mapped or default scene
+    scenesToCheck.add(getTargetScene()); // Always check the main selected scene
+
+    // If it was potentially cloned from a mapping
+    if (targetInfo.mapping && targetInfo.mapping.cloneToMain && targetInfo.scene !== getTargetScene()) {
+        scenesToCheck.add(getTargetScene()); // Add main scene if it was cloned there
+    }
+    
+    let removedFromAnyScene = false;
+    for (const sceneName of scenesToCheck) {
+        if (await tryRemoveFromScene(sourceName, sceneName)) {
+            removedFromAnyScene = true;
+        }
+    }
+
+    // Optional: If not found in likely scenes, consider removing the input globally if no longer in any scene item.
+    // This is more complex as it requires checking all scenes. For now, just removing from target/main.
+    // If you want to remove the input itself if it's not used anywhere:
+    // 1. Check if the source item exists in *any* scene.
+    // 2. If not, then call sendRequest('RemoveInput', { inputName: sourceName });
+    // This is usually not necessary as OBS handles unused sources gracefully.
+
+    if (!removedFromAnyScene) {
+        logMessage(`Source '${sourceName}' not found in relevant scenes for removal or already removed.`);
+    }
+    // Rearrange streams in affected scenes
+    if (sourceSizingSelect.value === 'autoGrid') {
+        for (const sceneName of scenesToCheck) {
+            setTimeout(() => rearrangeAllStreamsInScene(sceneName), 200); // Delay for removal to process
+        }
+    }
+}
+
+async function tryRemoveFromScene(sourceName, sceneName) {
+    if (!sceneName) return false;
+    try {
+        const itemInfo = await sendRequest('GetSceneItemId', { sceneName, sourceName });
+        if (itemInfo && itemInfo.sceneItemId) {
+            await sendRequest('RemoveSceneItem', { sceneName, sceneItemId: itemInfo.sceneItemId });
+            logMessage(`Removed source '${sourceName}' from scene '${sceneName}'.`);
+            return true;
+        }
+    } catch (error) {
+        if (!error.message.toLowerCase().includes("not found")) { // Log only unexpected errors
+            logMessage(`Error trying to remove '${sourceName}' from '${sceneName}': ${error.message}`);
+        }
+    }
+    return false;
+}
+
+function loadJsShaLibrary() {
+    return new Promise((resolve, reject) => {
+        if (typeof jsSHA !== 'undefined') { resolve(); return; }
+        const script = document.createElement('script');
+        script.src = 'https://cdnjs.cloudflare.com/ajax/libs/jsSHA/3.3.0/sha256.js'; // Ensure this is a reliable CDN
+        script.onload = resolve;
+        script.onerror = () => reject(new Error('Failed to load jsSHA library'));
+        document.head.appendChild(script);
+    });
+}
+
+// Event handlers
+obsSceneSelect.addEventListener('change', () => { obsSceneNameInput.value = obsSceneSelect.value; saveSettings(); });
+[obsWsUrlInput, obsWsPasswordInput, vdoNinjaRoomInput, vdoNinjaPasswordInput, vdoNinjaStreamIdsInput, autoAddSourcesCheckbox, autoRemoveSourcesCheckbox].forEach(el => el.addEventListener('change', saveSettings));
+sourceSizingSelect.addEventListener('change', () => {
+    saveSettings();
+    if (sourceSizingSelect.value === 'autoGrid') {
+        rearrangeAllStreamsInScene(getTargetScene()); // Rearrange current target scene
+    }
+});
+loadScenesBtn.addEventListener('click', fetchObsScenes);
+
+document.addEventListener('DOMContentLoaded', () => {
+    loadSettings(); 
+    logMessage("VDO.Ninja OBS Control Dock Initialized.");
+    const secureFields = document.querySelectorAll('#vdoNinjaRoom, #vdoNinjaStreamIds');
+    secureFields.forEach(field => {
+        field.classList.add('blur-field');
+        field.addEventListener('focus', () => field.classList.remove('blur-field'));
+        field.addEventListener('blur', () => field.classList.add('blur-field'));
+    });
+    if (!document.getElementById('autoRemoveSources')) { // Defensive check
+        const autoSourceOptions = document.getElementById('autoSourceOptions');
+        if (autoSourceOptions) { /* ... ensure it's created if somehow missing ... */ }
+    }
+    startVdoNinjaConnectionMonitor();
+});
+</script>
+</body>
+</html>
\ No newline at end of file
