@zeesoft/i18n-verify 3.4.1 → 3.4.3

package/dist/executor.mjs

@@ -459,1088 +459,1369 @@ class BaseReport {
   }
 }
 function getBodyData() {
-  return `<header><div class="logo">zAutomate.AI</div><div class="report-timestamp"><span class="info"></span></div></header>
-    <main>
-      <div class="sidebar">
-        <ul class="menu" id="menu">
-          <li class="menu-item" data-page="overview">
-            <a href="#">Overview</a>
-          </li>
-          <li class="menu-item" data-page="log">
-            <a href="#">View Log</a>
-          </li>
-          <li class="menu-item has-submenu" data-page="insights">
-            <a href="#" data-page="insights">Insights</a>
-            <ul class="submenu"></ul>
-          </li>
-        </ul>
-        <div class="footer"></div>
-      </div>
-      <div class="content-wrapper">
-        <div class="container">
-          <div id="overview" class="content">
-            <div class="common-info card">
-              <span class="title"></span>
-              <p class="info"></p>
-              <div class="section"></div>
-            </div>
-            <div class="overall-quality card">
-              <span class="title">Overall I18n Coverage</span>
-              <div class="section">
-                <div class="block">
-                  <article>
-                    <p class="desc">
-                      zI18n-Verify report provides a comprehensive information
-                      about the I18n and L10n quailty of your application.
-                    </p>
-                    <ul class="items">
-                      <li>
-                        <h4>Reviewed:</h4>
-                        <p class="detail">
-                          Total strings which are captured and processed by
-                          zI18n-Verify.
-                        </p>
-                      </li>
-                      <li>
-                        <h4>Internationlized:</h4>
-                        <p class="detail">
-                          Different types of value like string, number, date-time
-                          which are properly Internationalized.
-                        </p>
-                      </li>
-                      <li>
-                        <h4>Not Internationalized:</h4>
-                        <p class="detail">
-                          Values which are not Internationalized. Also includes
-                          Partially Localized strings and Encoding Issues.
-                        </p>
-                      </li>
-                      <li>
-                        <h4>Skipped:</h4>
-                        <p class="detail">
-                          Values which are skipped from processing because they
-                          are listed in DNT / Ignored lists or contains Auto
-                          Ignored pattern / User input pattern.
-                        </p>
-                      </li>
-                    </ul>
-                  </article>
-                </div>
-                <div class="block">
-                  <div class="graph"></div>
-                </div>
-              </div>
-            </div>
-            <div class="string-quality card">
-              <span class="title">String Coverage</span>
-              <div class="graph"></div>
-            </div>
-            <div class="skipped-items card">
-              <span class="title">Skipped Items</span>
-              <div class="graph"></div>
-            </div>
-            <div class="number-quality card">
-              <span class="title">Number Coverage</span>
-              <div class="graph"></div>
-            </div>
-            <div class="datetime-quality card">
-              <span class="title">DateTime Coverage</span>
-              <div class="graph"></div>
-            </div>
-          </div>
-          <div id="page" class="content">
-            <span class="title">Pages</span>
-            <div class="section">
-              <div class="desc"></div>
-            </div>
-          </div>
-          <div id="log" class="content">
-            <span class="title">Runtime log</span>
-            <div class="log-content"><pre></pre></div>
-          </div>
-          <div id="insights" class="content">
-            <div class="cards">
-              <span class="title">Locale Quality</span>
-              <div class="holder"></div>
-            </div>
-          </div>
-          <div id="locale" class="content">
-            <span class="title">Locale Quality</span>
-            <div class="coverage-info">
-              <table class="row-border hover order-column stripe"></table>
-            </div>
-            <div id="imageViewer" class="image-viewer">
-              <span class="close-button" onclick="closeImageViewer()" title="close"
-                >&times;</span
-              >
-              <div class="image-container">
-                <img id="imageView" src="" alt="Image" />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </main>`;
+  return '<header class="report-header">\n    <div class="header-left">\n      <div class="brand-badge">\n        <span class="brand-text">zAutomate<span class="brand-ai">.AI</span></span>\n      </div>\n      <div class="header-divider"></div>\n      <div class="product-badge" id="productBadge" title="Product Name">\n        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m7.5 4.27 9 5.15"/><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/></svg>\n        <span class="product-name" id="productName">Product</span>\n      </div>\n      <div class="mode-pill mode-sanity" id="modePill">\n        <span class="mode-dot"></span>\n        <span class="mode-label" id="modeLabel">Quick Sanity</span>\n      </div>\n      <div class="status-pill status-passed" id="statusPill">\n        <span class="status-icon"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg></span>\n        <span class="status-label" id="statusLabel">Passed</span>\n      </div>\n      <div class="timestamp-badge">\n        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>\n        <span class="info" id="reportTimestamp">--</span>\n      </div>\n    </div>\n    <div class="nav-tabs-wrapper">\n      <nav class="tabs-list" id="menu">\n        <button type="button" class="tab-item selected" data-page="overview">\n          <svg class="tab-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/></svg>\n          <span>Overview</span>\n        </button>\n        <button type="button" class="tab-item" data-page="log">\n          <svg class="tab-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="4 17 10 11 4 5"/><line x1="12" x2="20" y1="19" y2="19"/></svg>\n          <span>View Log</span>\n        </button>\n        <div class="tab-dropdown" id="insightsTabDropdown">\n          <button type="button" class="tab-item has-submenu" data-page="insights">\n            <svg class="tab-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m22 7-8.5 8.5-5-5L2 17"/><polyline points="16 7 22 7 22 13"/></svg>\n            <span>Insights</span>\n            <svg class="tab-chevron" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>\n          </button>\n          <ul class="submenu"></ul>\n        </div>\n      </nav>\n    </div>\n  </header>\n  <main class="report-main">\n    <div class="content-wrapper">\n      <div class="container">\n        <div id="overview" class="content active">\n          <div class="common-info card">\n            <span class="title"></span>\n            <p class="info"></p>\n            <div class="section"></div>\n          </div>\n          <div class="overall-quality card">\n            <span class="title">Overall I18n Coverage</span>\n            <div class="section">\n              <div class="block">\n                <article>\n                  <p class="desc">\n                    zI18n-Verify report provides a comprehensive information\n                    about the I18n and L10n quality of your application.\n                  </p>\n                  <ul class="items">\n                    <li>\n                      <h4>Reviewed:</h4>\n                      <p class="detail">Total strings which are captured and processed by zI18n-Verify.</p>\n                    </li>\n                    <li>\n                      <h4>Internationalized:</h4>\n                      <p class="detail">Different types of value like string, number, date-time which are properly Internationalized.</p>\n                    </li>\n                    <li>\n                      <h4>Not Internationalized:</h4>\n                      <p class="detail">Values which are not Internationalized. Also includes Partially Localized strings and Encoding Issues.</p>\n                    </li>\n                    <li>\n                      <h4>Skipped:</h4>\n                      <p class="detail">Values which are skipped from processing because they are listed in DNT / Ignored lists or contains Auto Ignored pattern / User input pattern.</p>\n                    </li>\n                  </ul>\n                </article>\n              </div>\n              <div class="block">\n                <div class="graph"></div>\n              </div>\n            </div>\n          </div>\n          <div class="string-quality card">\n            <span class="title">String Coverage</span>\n            <div class="graph"></div>\n          </div>\n          <div class="skipped-items card">\n            <span class="title">Skipped Items</span>\n            <div class="graph"></div>\n          </div>\n          <div class="number-quality card">\n            <span class="title">Number Coverage</span>\n            <div class="graph"></div>\n          </div>\n          <div class="datetime-quality card">\n            <span class="title">DateTime Coverage</span>\n            <div class="graph"></div>\n          </div>\n        </div>\n        <div id="page" class="content">\n          <span class="title">Pages</span>\n          <div class="section">\n            <div class="desc"></div>\n          </div>\n        </div>\n        <div id="log" class="content">\n          <div class="terminal-container">\n            <div class="terminal-header">\n              <div class="terminal-dots">\n                <span class="terminal-dot dot-close"></span>\n                <span class="terminal-dot dot-min"></span>\n                <span class="terminal-dot dot-max"></span>\n              </div>\n              <div class="terminal-title">\n                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="4 17 10 11 4 5"/><line x1="12" x2="20" y1="19" y2="19"/></svg>\n                <span>Runtime Automation Execution Log</span>\n              </div>\n              <div class="terminal-actions">\n                <input type="text" id="logSearchInput" class="terminal-search" placeholder="Filter logs..." />\n                <button class="terminal-copy-btn" id="copyLogBtn" type="button" title="Copy Log">\n                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>\n                  <span>Copy</span>\n                </button>\n              </div>\n            </div>\n            <div class="log-content"><pre id="logPre"></pre></div>\n          </div>\n        </div>\n        <div id="insights" class="content">\n          <div class="cards">\n            <span class="title">Locale Quality</span>\n            <div class="holder"></div>\n          </div>\n        </div>\n        <div id="locale" class="content">\n          <div class="locale-header-bar">\n            <button class="back-to-insights-btn" id="backToInsightsBtn" type="button">\n              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>\n              <span>Back to Insights</span>\n            </button>\n            <span class="title">Locale Quality Details</span>\n          </div>\n          <div class="coverage-info">\n            <table class="row-border hover order-column stripe"></table>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div id="imageViewer" class="image-viewer">\n      <div class="image-viewer-backdrop" onclick="closeImageViewer()"></div>\n      <div class="image-container">\n        <div class="image-viewer-header">\n          <span class="image-viewer-title">Layout Screenshot Preview</span>\n          <button class="close-button" onclick="closeImageViewer()" title="Close (Esc)">&times;</button>\n        </div>\n        <div class="image-viewer-body">\n          <img id="imageView" src="" alt="Screenshot Preview" />\n        </div>\n      </div>\n    </div>\n  </main>';
 }
 function getCssData() {
-  return `html {
-        width: 100vw;
-        height: 100vh;
-      }
+  return `:root {
+  --bg-body: #f8fafc;
+  --bg-card: #ffffff;
+  --border: #e2e8f0;
+  --foreground: #0f172a;
+  --text-muted: #64748b;
+  --accent: #ea580c;
+  --accent-light: #fff7ed;
+  --muted-bg: #f1f5f9;
+  --success: #10b981;
+  --danger: #ef4444;
+  --warning: #f59e0b;
+  --info: #0284c7;
+  --purple: #8b5cf6;
+  --radius: 8px;
+}
 
-      * {
-        user-select: none;
-        box-sizing: border-box;
-        scrollbar-width: thin;
-        scroll-behavior: smooth;
-      }
+[data-theme="dark"] {
+  --bg-body: #09090b;
+  --bg-card: #18181b;
+  --border: #27272a;
+  --foreground: #f8fafc;
+  --text-muted: #a1a1aa;
+  --accent: #f97316;
+  --accent-light: rgba(249, 115, 22, 0.15);
+  --muted-bg: #27272a;
+  --success: #10b981;
+  --danger: #ef4444;
+  --warning: #f59e0b;
+  --info: #38bdf8;
+  --purple: #a855f7;
+}
 
-      body {
-        width: 100%;
-        height: 100%;
-        margin: 0;
-        display: flex;
-        flex-direction: column;
-        font-family: Arial, sans-serif;
-        font-family: 'Helvetica Neue', Arial, sans-serif;
-        -webkit-font-smoothing: antialiased; /* Webkit-based browsers */
-        -moz-osx-font-smoothing: grayscale; /* Firefox on OS X */
-        font-smooth: always; /* Non-standard, some browsers */
-      }
+* {
+  box-sizing: border-box;
+  scrollbar-width: thin;
+  scrollbar-color: var(--border) transparent;
+}
 
-      header {
-        background-color: #333;
-        height: 8%;
-        display: flex;
-      }
+html, body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  background-color: var(--bg-body);
+  color: var(--foreground);
+  font-size: 14px;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
 
-      main {
-        display: flex;
-        flex-direction: row;
-        width: 100%;
-        height: 92%
-      }
+/* Header */
+.report-header {
+  height: 52px;
+  background-color: var(--bg-card);
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
 
-      .sidebar {
-        width: 16%;
-        height: 100%;
-        background-color: #333;
-        color: #fff;
-        padding: 20px;
-        box-sizing: border-box;
-        float: left;
-      }
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
 
-      .logo {
-        flex-grow: 1;
-        align-content: center;
-        margin-left: 2%;
-        color: #14cf96;
-        font-weight: bold;
-        font-size: 1.4em;
-      }
+.brand-badge {
+  font-family: 'Outfit', sans-serif;
+  font-weight: 700;
+  font-size: 15px;
+  letter-spacing: -0.3px;
+  color: var(--foreground);
+}
 
-      .report-timestamp {
-        flex-grow: 1;
-        height: 100%;
-        align-content: center;
-        margin-right: 2%;
-      }
+.brand-text .brand-ai {
+  color: var(--accent);
+}
 
-      .report-timestamp .info {
-        float: right;
-        font-size: 0.9em;
-        color: #90a3a9;
-      }
+.header-divider {
+  width: 1px;
+  height: 16px;
+  background-color: var(--border);
+}
 
-      .menu {
-        list-style-type: none;
-        padding: 0;
-        margin: 0;
-      }
+.product-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  background-color: var(--muted-bg);
+  color: var(--foreground);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 2px 8px;
+  font-size: 12px;
+  font-weight: 500;
+}
 
-      .menu-item {
-        margin-bottom: 10px;
-      }
+.mode-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  border-radius: 6px;
+  padding: 2px 8px;
+  font-size: 12px;
+  font-weight: 500;
+}
 
-      .menu-item a {
-        color: #fff;
-        text-decoration: none;
-        display: block;
-        padding: 10px;
-        border-radius: 5px;
-        font-size: 1.05rem;
-      }
+.mode-pill .mode-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+}
 
-      .menu-item a:hover {
-        background-color: #555;
-      }
+.mode-pill.mode-sanity {
+  background-color: rgba(16, 185, 129, 0.1);
+  color: #059669;
+  border: 1px solid rgba(16, 185, 129, 0.2);
+}
+.mode-pill.mode-sanity .mode-dot { background-color: #10b981; }
 
-      .submenu {
-        display: none;
-        list-style-type: none;
-        padding-left: 20px;
-      }
+.mode-pill.mode-context {
+  background-color: rgba(59, 130, 246, 0.1);
+  color: #2563eb;
+  border: 1px solid rgba(59, 130, 246, 0.2);
+}
+.mode-pill.mode-context .mode-dot { background-color: #3b82f6; }
 
-      .menu-item.has-submenu > a::after {
-        content: '⯆';
-        float: right;
-        margin-left: 5px;
-      }
+.mode-pill.mode-i18n {
+  background-color: rgba(234, 88, 12, 0.1);
+  color: #ea580c;
+  border: 1px solid rgba(234, 88, 12, 0.2);
+}
+.mode-pill.mode-i18n .mode-dot { background-color: #ea580c; }
+
+.status-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  border-radius: 6px;
+  padding: 2px 8px;
+  font-size: 12px;
+  font-weight: 600;
+}
 
-      .menu-item.has-submenu.selected > a::after {
-        content: '⯅';
-        float: right;
-        margin-left: 5px;
-      }
+.status-pill.status-passed {
+  background-color: rgba(16, 185, 129, 0.1);
+  color: #059669;
+  border: 1px solid rgba(16, 185, 129, 0.2);
+}
 
-      .menu-item.selected > a {
-        background-color: #555;
-      }
+.status-pill.status-failed {
+  background-color: rgba(239, 68, 68, 0.1);
+  color: #dc2626;
+  border: 1px solid rgba(239, 68, 68, 0.2);
+}
 
-      .submenu .sub-menu-item {
-        margin: 3px auto;
-      }
+.timestamp-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  color: var(--text-muted);
+  font-size: 12px;
+}
 
-      .submenu .sub-menu-item a:hover {
-        background-color: #777;
-      }
+/* Navigation Tabs (Minimalist client_v2 style) */
+.nav-tabs-wrapper {
+  display: flex;
+  align-items: center;
+}
 
-      .submenu .sub-menu-item.selected a {
-        background-color: #555 !important;
-      }
+.tabs-list {
+  background-color: var(--muted-bg);
+  border-radius: 8px;
+  padding: 3px;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  list-style: none;
+  margin: 0;
+}
 
-      .submenu.active {
-        display: block !important;
-      }
+.tab-item {
+  border: none;
+  background: transparent;
+  color: var(--text-muted);
+  font-size: 13px;
+  font-weight: 500;
+  padding: 5px 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-family: inherit;
+  outline: none;
+}
 
-      .view-screenshot-image {
-        width: 100px;
-        height: 30px;
-        content: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBVcGxvYWRlZCB0bzogU1ZHIFJlcG8sIHd3dy5zdmdyZXBvLmNvbSwgR2VuZXJhdG9yOiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4NCjxzdmcgZmlsbD0iIzAwMDAwMCIgaGVpZ2h0PSI4MDBweCIgd2lkdGg9IjgwMHB4IiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIA0KCSB2aWV3Qm94PSIwIDAgNDkwIDQ5MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8cGF0aCBkPSJNMjQ1LjIwNCwxMDEuMjY3QzY3LjE3MSwxMDEuMjY3LDAsMjQ1LDAsMjQ1czY2Ljc2MywxNDMuNzMzLDI0NC43OTYsMTQzLjczM0M0MjIuODI5LDM4OC43MzMsNDkwLDI0NSw0OTAsMjQ1DQoJCVM0MjMuMjM4LDEwMS4yNjcsMjQ1LjIwNCwxMDEuMjY3eiBNMjQ0Ljc5NiwzNzMuNDIxYy0xNDYuMzkzLDAtMjEyLjM2Ny0xMDEuMDUzLTIyNy41MDYtMTI4LjMzMw0KCQljMTUuMjQ5LTI2Ljc5Niw4Mi43MzMtMTI4LjUwOCwyMjcuOTE0LTEyOC41MDhjMTQ2LjUxNCwwLDIxMi40NzUsMTAxLjIyLDIyNy41NDMsMTI4LjQNCgkJQzQ1Ny41NzgsMjcyLjIwMywzOTEuMzEzLDM3My40MjEsMjQ0Ljc5NiwzNzMuNDIxeiIvPg0KCTxwYXRoIGQ9Ik0yNDUuMDAzLDE0Ni4xMjRjLTU0LjUyMSwwLTk4Ljg4MSw0NC4zNTItOTguODgxLDk4Ljg3M2MwLDU0LjUyMSw0NC4zNiw5OC44ODEsOTguODgxLDk4Ljg4MXM5OC44NzMtNDQuMzYsOTguODczLTk4Ljg4MQ0KCQlDMzQzLjg3NiwxOTAuNDc3LDI5OS41MjQsMTQ2LjEyNCwyNDUuMDAzLDE0Ni4xMjR6IE0yNDUuMDAzLDMyOC41NjZjLTQ2LjA4LDAtODMuNTY4LTM3LjQ4OS04My41NjgtODMuNTY4DQoJCWMwLTQ2LjA3MiwzNy40ODktODMuNTYxLDgzLjU2OC04My41NjFjNDYuMDcyLDAsODMuNTYxLDM3LjQ4OSw4My41NjEsODMuNTYxQzMyOC41NjQsMjkxLjA3NywyOTEuMDc1LDMyOC41NjYsMjQ1LjAwMywzMjguNTY2eiIvPg0KCTxwYXRoIGQ9Ik0yNDUuMDAzLDE3NS41ODNjLTM4LjI4MSwwLTY5LjQyMiwzMS4xNDEtNjkuNDIyLDY5LjQxNWMwLDM4LjI3NCwzMS4xNDEsNjkuNDE1LDY5LjQyMiw2OS40MTUNCgkJYzM4LjI3NCwwLDY5LjQxNS0zMS4xNDEsNjkuNDE1LTY5LjQxNUMzMTQuNDE3LDIwNi43MjQsMjgzLjI3NywxNzUuNTgzLDI0NS4wMDMsMTc1LjU4M3ogTTI0NS4wMDMsMjk5LjENCgkJYy0yOS44MzMsMC01NC4xMS0yNC4yNy01NC4xMS01NC4xMDJjMC0yOS44MzIsMjQuMjc3LTU0LjEwMiw1NC4xMS01NC4xMDJzNTQuMTAyLDI0LjI3LDU0LjEwMiw1NC4xMDINCgkJQzI5OS4xMDUsMjc0LjgzLDI3NC44MzUsMjk5LjEsMjQ1LjAwMywyOTkuMXoiLz4NCgk8cGF0aCBkPSJNMjQ1LjAwMywyMDYuNjc5Yy0yMS4xMywwLTM4LjMyNiwxNy4xODktMzguMzI2LDM4LjMxOWMwLDIxLjEyOSwxNy4xOTcsMzguMzI2LDM4LjMyNiwzOC4zMjZzMzguMzE5LTE3LjE5NywzOC4zMTktMzguMzI2DQoJCUMyODMuMzIxLDIyMy44NjgsMjY2LjEzMiwyMDYuNjc5LDI0NS4wMDMsMjA2LjY3OXogTTI0NS4wMDMsMjY4LjAxMWMtMTIuNjg4LDAtMjMuMDE0LTEwLjMyNi0yMy4wMTQtMjMuMDE0DQoJCWMwLTEyLjY4OCwxMC4zMjUtMjMuMDA2LDIzLjAxNC0yMy4wMDZjMTIuNjg4LDAsMjMuMDA2LDEwLjMxOCwyMy4wMDYsMjMuMDA2QzI2OC4wMDksMjU3LjY4NiwyNTcuNjkxLDI2OC4wMTEsMjQ1LjAwMywyNjguMDExeiIvPg0KPC9nPg0KPC9zdmc+);
-      }
+.tab-item:hover {
+  color: var(--foreground);
+}
 
-      .content-wrapper {
-        padding: 1%;
-        float: left;
-        width: 84%;
-        background-color: #f4f4f4;
-        overflow: hidden;
-        height: 100%;
-      }
+.tab-item.selected {
+  background-color: var(--bg-card);
+  color: var(--foreground);
+  font-weight: 600;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+}
 
-      .content {
-        display: none !important;
-        height: 100%;
-      }
+.tab-dropdown {
+  position: relative;
+}
 
-      .content .title {
-        font-size: 1rem;
-        color: #080404e2;
-        font-weight: 600;
-      }
+.tab-chevron {
+  transition: transform 0.15s ease;
+}
 
-      .content .title::after {
-        content: ':';
-      }
+.submenu.active + .tab-item .tab-chevron,
+.tab-dropdown:focus-within .tab-chevron {
+  transform: rotate(180deg);
+}
 
-      .content.active {
-        display: flex !important;
-        flex-direction: column;
-        gap: 0.9rem;
-        flex-wrap: wrap;
-        transition: all 2s ease-in-out;
-      }
+.tabs-list .submenu {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  background-color: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  min-width: 140px;
+  padding: 4px;
+  display: none;
+  z-index: 1000;
+  list-style: none;
+  margin: 0;
+}
 
-      .container {
-        height: 99%;
-        overflow: hidden;
-        overflow-y: auto;
-      }
+.tabs-list .submenu.active {
+  display: block;
+}
 
-      .sidebar .footer {
-        bottom: 1.5%;
-        position: absolute;
-        font-size: 0.75rem;
-        color: #14cf96;
-        font-family: system-ui;
-        width: inherit;
-      }
+.sub-menu-item {
+  margin: 0;
+  padding: 0;
+}
 
-      #overview {
-        flex-direction: row;
-        justify-content: space-between;
-      }
+.sub-menu-item a {
+  display: block;
+  padding: 6px 12px;
+  font-size: 13px;
+  color: var(--foreground);
+  text-decoration: none;
+  border-radius: 5px;
+  font-family: inherit;
+  transition: background 0.15s;
+}
 
-      #overview .card {
-        display: flex;
-        flex-direction: column;
-        width: 25rem;
-        border: 1px solid #ddd;
-        box-shadow: 0 22px 35px -16px rgba(0, 0, 0, 0.3);
-        border-radius: 5px;
-        background: white;
-        padding: 1rem;
-      }
+.sub-menu-item a:hover {
+  background-color: var(--muted-bg);
+}
 
-      #overview .overall-quality {
-        flex-basis: 100%;
-        line-height: 14px;
-      }
+/* Main Content Layout (Full Width) */
+.report-main {
+  width: 100%;
+  height: calc(100% - 52px);
+  overflow-y: auto;
+}
 
-      #overview .overall-quality .section {
-        display: flex;
-        flex-direction: row;
-      }
+.content-wrapper {
+  width: 100%;
+  min-height: 100%;
+  padding: 20px;
+}
 
-      #overview .overall-quality .section .block {
-        width: 50%;
-      }
+.container {
+  max-width: 1360px;
+  margin: 0 auto;
+}
 
-      #overview .overall-quality .section .block article p.desc {
-        font-size: 0.85em;
-      }
+.content {
+  display: none;
+}
 
-      #overview .overall-quality .section .block article .items li {
-        font-size: 0.8em;
-      }
+.content.active {
+  display: block;
+}
 
-      #overview .overall-quality .section .block article .items li .detail {
-        margin-top: -2%;
-      }
+/* Cards */
+.card {
+  background-color: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 20px;
+  margin-bottom: 20px;
+}
 
-      #overview .overall-quality .section .block .graph {
-        margin-top: 1.5em;
-      }
+.card > .title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--foreground);
+  margin-bottom: 14px;
+  display: block;
+}
 
-      #overview .string-quality,
-      #overview .number-quality,
-      #overview .datetime-quality,
-      #overview .skipped-items {
-        flex-basis: 48.5%;
-      }
+/* Common Info / Sanity Details Card */
+.common-info.card {
+  border-left: 3px solid var(--accent);
+}
 
-      #overview .string-quality .graph,
-      #overview .number-quality .graph,
-      #overview .datetime-quality .graph,
-      #overview .skipped-items .graph {
-        align-self: center;
-      }
+.common-info .title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--foreground);
+  margin-bottom: 8px;
+  display: block;
+}
 
-      #overview .string-quality .graph {
-        margin-left: 4rem;
-      }
+.common-info .info {
+  font-size: 13.5px;
+  color: var(--text-muted);
+  line-height: 1.6;
+  margin: 0;
+}
 
-      #overview .number-quality .graph,
-      #overview .datetime-quality .graph {
-        margin-top: -0.9rem;
-        margin-left: 4.5rem;
-      }
+.btn-view-log {
+  margin-top: 14px;
+  background-color: var(--accent);
+  color: #ffffff;
+  border: none;
+  padding: 6px 14px;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-family: inherit;
+  transition: opacity 0.15s;
+}
 
-      #overview .common-info {
-        width: 100%;
-        height: 100%;
-      }
+.btn-view-log:hover {
+  opacity: 0.9;
+}
 
-      #overview .common-info .info {
-        font-size: 0.9em;
-        margin-top: 0.8%;
-      }
+/* Overall Quality Section */
+.overall-quality .section {
+  display: flex;
+  gap: 24px;
+  align-items: flex-start;
+}
 
-      #overview .common-info .title {
-        font-size: 1.1em;
-      }
+.overall-quality .block:first-child {
+  flex: 1;
+}
 
-      #overview .common-info .section {
-        width: 100%;
-        height: 100%;
-        overflow: hidden;
-        padding-top: 3%;
-      }
+.overall-quality .block:last-child {
+  width: 520px;
+  min-width: 480px;
+}
 
-      #overview .common-info .section .page-tiles .title-section .locale-filter-wrapper {
-        margin-right: 1%;
-        font-size: 0.8em;
-        font-weight: 600;
-      }
+.overall-quality .desc {
+  font-size: 13.5px;
+  color: var(--text-muted);
+  line-height: 1.6;
+  margin: 0 0 16px 0;
+}
 
-      #overview .common-info .section .page-tiles .title-section .locale-filter-wrapper #locale-filter {
-        font-size: 0.9em;
-        height: 1.7em;
-        border-radius: 3px
-      }
+.overall-quality .items {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
 
-      #overview .common-info .section .page-tiles .title-section {
-        display: flex;
-        align-items: center;
-      }
+.overall-quality .items li {
+  background-color: var(--muted-bg);
+  padding: 12px;
+  border-radius: 6px;
+  border: 1px solid var(--border);
+}
 
-      #overview .common-info .section .page-tiles .title-section .title-wrapper {
-        flex: 1;
-      }
+.overall-quality .items li h4 {
+  margin: 0 0 4px 0;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--foreground);
+}
 
-      #overview .common-info .section .page-tiles .title-section .search-field-wrapper {
-        flex: 0.7;
-        font-size: 0.8em;
-        font-weight: 600;
-      }
+.overall-quality .items li p.detail {
+  margin: 0;
+  font-size: 12px;
+  color: var(--text-muted);
+  line-height: 1.4;
+}
 
-      #overview .common-info .section .page-tiles {
-        display: flex;
-        flex-direction: column;
-        gap: 1%;
-        width: 100%;
-        height: 92%;
-      }
+/* Graphs grid */
+.string-quality, .skipped-items, .number-quality, .datetime-quality {
+  margin-bottom: 20px;
+}
 
-      #overview .common-info .section .page-tiles .title {
-        flex: 1;
-      }
+/* Status Bars */
+.status-bar {
+  margin-bottom: 16px;
+}
 
-      #overview .common-info .section .page-tiles .tiles-list-wrapper {
-        width: 100%;
-        height: 100%;
-        border: 0.5px solid #00000008;
-        border-radius: 5px;
-        padding: 0;
-        margin: 0;
-      }
+.bar-container {
+  margin-bottom: 10px;
+}
 
-      #overview .common-info .section .page-tiles .tiles-list {
-        width: 100%;
-        height: 100%;
-        overflow: hidden;
-        overflow-y: auto;
-        padding: 10px;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2.2%;
-        justify-content: start;
-      }
+.bar-container .name {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-muted);
+  margin-bottom: 4px;
+}
 
-      #overview .common-info .section .page-tiles .tiles-list .empty-context {
-        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAA7AAAAOwBeShxvQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAALnSURBVFiFxddNiFZlFAfw3zjvSGUfWjRCgdmiTV8IGjlFhBJotQmjdraqqBbZtAjBFoYVBH0tGiQUFCJKDQqpNpW0sJosIvowyEW1s4a+7UOsuS3OubzPvL133hmbefvD5d7nPOd5zsfzP+feS2AEb+MYqnm+jqWtkbTtKvzVB8Od1wmslt5UeAKLzD8W4am0+S7ttPfDeI3T0+bxVmH4hj46UGPhQHryv6FVPO/rs+1boMzAQJ8dqGBBn43+C60G+TW4B4NzZOdvjOFgt8m6MZR40dw3nhe62W3KQH00T2K8d4DTYjXu15DNJgdqjPvv1fEh1uH1k3FgLvAVLm2anC8HlmE5luA7fIZfO3ROzMSBUdkwuuAQHi/GLdyOu3F5h+5xvIlH8F7KbpPk71YFO/Rm9Q+F/nJ8XMx9L96yr+B9EW09N4ahemFTJ1yMtabvA5/jcBofx1IcwWbsF98YNc7GvXgAp6ZjN2OyKQMzRUs78jdwZg/9VZhI/QdpzsAVmmv3MLbm813YLiJfhV9m4PRawYc/cBHdM/Co5rP/XfsMP0nZhmLtQXyA4RyvE5wYLXT25LotTVXwsGD5UJe5LwSpluEyQcb9xfwpWIm3cp/dKSv32o1bcSMnz4E1ue5Ah/xc7cxM5v1ZU494OOXfNmWgiQMVdgrCnZGyzgYzgW0izQP4CQ+ZGuTPeT+r3nQ2HHguda7M8aGOtesFwep+UIlOOFzoXJjyr2n/E5TRnoabRBcsrw2ipomS+1Pw4ZxibW30GdEbPs3x9kLnjpS9LL2rcL3Z49Vcu7WQjYqGU5/5cBq/OseDhc2NA9iEp0W/PiD+E6ZDhecF80fwjsjEtaL8emGbaEJHcAnx8fGY2f2evVZsOJayCdFkmjCYxifFsa1hamlcgBVY2COCSjSbozkewl7BmQovYRc+wo84H9fhPlycgd6ZOnOGBSKtv5k+c1/KyOcL52GLeOcfFbz6RrB9oy6d9R/3ey953ywo7QAAAABJRU5ErkJggg==);
-        width: 100%;
-        background-repeat: no-repeat;
-        height: 100%;
-        background-size: 2.5em;
-        background-position-x: 50%;
-        background-position-y: 43%;
-        display: flex;
-        justify-content: center;
-        align-content: center;
-        flex-wrap: wrap;
-      }
+.bar-holder {
+  background-color: var(--muted-bg);
+  height: 8px;
+  border-radius: 4px;
+  overflow: hidden;
+  position: relative;
+}
 
-      #overview .common-info .section .page-tiles .tiles-list .tile-container {
-        width: 23%;
-        height: 35%;
-        text-align: center;
-        display: flex;
-        flex-direction: column;
-        border: 1px solid #80808030;
-        border-radius: 5px;
-      }
+.bar {
+  height: 100%;
+  border-radius: 4px;
+  text-indent: -9999px;
+  transition: width 0.3s ease;
+}
 
-      #overview .common-info .section .page-tiles .tiles-list .tile-container:hover {
-        transform: scale(1.03);
-        box-shadow: 0 22px 35px -16px #00000033;
-        cursor: pointer;
-        transition: all 0.2s ease-in-out;
-      }
+.bar.--green { background-color: var(--success); }
+.bar.--blue { background-color: #3b82f6; }
+.bar.--yellow { background-color: var(--warning); }
+.bar.--red { background-color: var(--danger); }
+
+/* Stat Summary Table */
+.stat .name {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--foreground);
+  margin: 14px 0 8px 0;
+}
 
-      #overview .common-info .section .page-tiles .tiles-list .tile-container .image {
-        width: 100%;
-        height: 85%;
-        object-fit: contain;
-      }
+.stat table {
+  width: 100%;
+  border-collapse: collapse;
+}
 
-      #overview .common-info .section .page-tiles .tiles-list .tile-container .name span {
-        width: 75%;
-        display: inline-block;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
+.stat tr {
+  border-bottom: 1px solid var(--border);
+}
 
-      #overview .common-info .section .page-tiles .tiles-list .tile-container .name {
-        width: 100%;
-        display: block;
-        height: 15%;
-        align-content: center;
-        background-color: rgb(0 0 0 / 7%);
-        border-top: 1px solid #80808030;
-        color: #2cb2c1e6;
-        -webkit-font-smoothing: antialiased;
-        font-variant: all-small-caps;
-        font-weight: 600;
-        font-size: 0.87em;
-      }
+.stat td {
+  padding: 6px 0;
+  font-size: 12.5px;
+}
 
-      #insights .cards {
-        display: flex;
-        flex-direction: column;
-        gap: 1.5rem;
-      }
+.stat td.name {
+  color: var(--text-muted);
+}
 
-      #insights .cards .holder {
-        display: flex;
-        flex-direction: row;
-        gap: 1.5rem;
-        flex-wrap: wrap;
-      }
+.stat td.value {
+  color: var(--foreground);
+  font-weight: 600;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
 
-      #insights .cards .card {
-        display: flex;
-        flex-direction: column;
-        width: 20rem;
-        min-height: 10rem;
-        border: 1px solid #ddd;
-        box-shadow: 0 22px 35px -16px rgba(0, 0, 0, 0.3);
-        border-radius: 5px;
-        background: white;
-      }
+/* Insights Cards Holder */
+#insights .cards .holder {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
+  gap: 20px;
+}
 
-      #insights .cards .card:hover {
-        transform: scale(1.05);
-        box-shadow: 0 22px 35px -16px #07ff7d33;
-        cursor: pointer;
-        transition: all 0.2s ease-in-out;
-      }
+#insights .card[data-locale] {
+  cursor: pointer;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
 
-      #insights .cards .card .title {
-        height: 2.5rem;
-        font-size: 1rem;
-        padding-top: 1rem;
-        font-weight: 500;
-        background: #0c5ad9d6;
-        border-top-left-radius: 5px;
-        border-top-right-radius: 5px;
-        padding-left: 1rem;
-        color: white;
-      }
+#insights .card[data-locale]:hover {
+  border-color: var(--accent);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+}
 
-      #insights .cards .card .title::after {
-        content: '';
-      }
+/* Locale Table Header */
+.locale-header-bar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+}
 
-      #insights .cards .card .card-content {
-        display: flex;
-        flex-direction: column;
-        gap: 1rem;
-        padding: 1rem;
-      }
+.back-to-insights-btn {
+  background-color: var(--muted-bg);
+  border: 1px solid var(--border);
+  color: var(--foreground);
+  border-radius: 6px;
+  padding: 5px 12px;
+  font-size: 12.5px;
+  font-weight: 500;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-family: inherit;
+  transition: background 0.15s;
+}
 
-      #insights .cards .card .status-bar {
-        display: flex;
-        flex-direction: column;
-        gap: 0.8rem;
-      }
+.back-to-insights-btn:hover {
+  background-color: var(--border);
+}
 
-      #insights .cards .card .status-bar .bar-container .name {
-        font-size: 0.78rem;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-      }
+.locale-header-bar .title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--foreground);
+}
 
-      #insights .cards .card .status-bar .bar-container .name::after {
-        content: ':';
-      }
+/* DataTables Styling */
+.coverage-info {
+  background-color: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 16px;
+}
 
-      #insights .cards .card .status-bar .bar-container .bar-holder {
-        width: 100%;
-        height: 10px;
-        border: 1px solid #00000038;
-        border-radius: 2px;
-      }
+table.dataTable {
+  border-collapse: separate !important;
+  border-spacing: 0;
+  width: 100% !important;
+  border: 1px solid var(--border) !important;
+  border-radius: 6px;
+  overflow: hidden;
+  background-color: var(--bg-card);
+}
 
-      #insights .cards .card .status-bar .bar-container .bar-holder .bar {
-        height: 100%;
-        font-size: 0.63rem;
-        text-align: right;
-        color: rgb(0, 0, 0);
-      }
+table.dataTable thead th {
+  background-color: var(--muted-bg) !important;
+  color: var(--foreground) !important;
+  font-size: 12.5px !important;
+  font-weight: 600 !important;
+  border-bottom: 1px solid var(--border) !important;
+  padding: 10px 12px !important;
+  text-align: left;
+}
 
-      .bar.--green {
-        background-color: #1dedaf;
-      }
+table.dataTable tbody td {
+  padding: 10px 12px !important;
+  font-size: 13px !important;
+  color: var(--foreground) !important;
+  border-bottom: 1px solid var(--border) !important;
+}
 
-      .bar.--red {
-        background-color: #fe3e3e;
-      }
+table.dataTable tbody tr:last-child td {
+  border-bottom: none !important;
+}
 
-      .bar.--yellow {
-        background-color: #faef1f;
-      }
+table.dataTable tbody tr:hover td {
+  background-color: var(--muted-bg) !important;
+}
 
-      .bar.--blue {
-        background-color: #77c2ff;
-      }
+select.filter.dt-input {
+  display: block;
+  width: 100%;
+  margin-top: 5px;
+  padding: 3px 6px;
+  font-size: 11.5px;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background-color: var(--bg-card);
+  color: var(--foreground);
+  font-family: inherit;
+  outline: none;
+}
 
-      #insights .cards .card .stat {
-        display: flex;
-        flex-direction: column;
-        gap: 0.3rem;
-        border: 0.5px solid #00000012;
-        border-radius: 6px;
-      }
+.reset-filters-btn {
+  background-color: var(--muted-bg);
+  border: 1px solid var(--border);
+  color: var(--foreground);
+  border-radius: 6px;
+  padding: 4px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  font-family: inherit;
+  transition: background 0.15s;
+  margin-left: 12px;
+}
 
-      #insights .cards .card .stat table td {
-        font-size: 0.78rem;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-      }
+.reset-filters-btn:hover {
+  background-color: var(--border);
+}
 
-      #insights .cards .card .stat table td.name {
-        width: 70%;
-      }
+.view-screenshot-btn {
+  background-color: var(--muted-bg);
+  border: 1px solid var(--border);
+  color: var(--foreground);
+  border-radius: 6px;
+  padding: 4px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  font-family: inherit;
+  transition: all 0.15s ease;
+  line-height: 1;
+}
 
-      #insights .cards .card .stat table td.value::before {
-        content: ':  ';
-      }
+.view-screenshot-btn:hover {
+  background-color: var(--accent);
+  color: #ffffff;
+  border-color: var(--accent);
+}
 
-      #locale {
-        display: flex;
-        gap: 0.2em;
-        background: white;
-        padding: 1em;
-        border-radius: 5px;
-        flex-wrap: nowrap;
-      }
+.view-screenshot-btn svg {
+  flex-shrink: 0;
+}
 
-      #locale .title {
-        content: ':';
-      }
+/* Terminal Log */
+.terminal-container {
+  background-color: #0f172a;
+  color: #f8fafc;
+  border-radius: var(--radius);
+  border: 1px solid #1e293b;
+  overflow: hidden;
+}
 
-      #locale .coverage-info {
-        width: 100%;
-      }
+.terminal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
+  background-color: #1e293b;
+  border-bottom: 1px solid #334155;
+}
 
-      #locale table thead th select.filter {
-        margin-left: 1rem;
-        max-width: 8rem;
-        text-overflow: ellipsis;
-      }
+.terminal-dots {
+  display: flex;
+  gap: 6px;
+}
 
-      #locale .image-viewer {
-        display: none;
-        position: fixed;
-        z-index: 9998;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background-color: rgba(0, 0, 0, 0.8);
-        text-align: center;
-      }
+.terminal-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
 
-      #locale .image-container {
-        position: relative;
-        top: 50%;
-        transform: translateY(-50%);
-        display: inline-block;
-        width: 98vw;
-        height: 94vh;
-        overflow: hidden;
-        overflow-y: auto;
-      }
+.dot-close { background-color: #ef4444; }
+.dot-min { background-color: #f59e0b; }
+.dot-max { background-color: #10b981; }
+
+.terminal-title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #94a3b8;
+}
 
-      #locale .image-viewer img {
-        width: 100%;
-      }
+.terminal-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
 
-      #locale .close-button {
-        position: absolute;
-        top: -0.6rem;
-        right: 0.1rem;
-        color: #ffffffbf;
-        font-size: 2.4rem;
-        cursor: pointer;
-        z-index: 9999;
-      }
+.terminal-search {
+  background-color: #0f172a;
+  border: 1px solid #334155;
+  color: #f8fafc;
+  border-radius: 4px;
+  padding: 4px 8px;
+  font-size: 12px;
+  outline: none;
+}
 
-      #locale .close-button:hover {
-        color: white;
-      }
+.terminal-copy-btn {
+  background-color: #334155;
+  border: none;
+  color: #f8fafc;
+  border-radius: 4px;
+  padding: 4px 10px;
+  font-size: 12px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-family: inherit;
+  transition: background 0.15s;
+}
 
-      #locale table tbody td {
-        font-size: 0.9em;
-      }
+.terminal-copy-btn:hover {
+  background-color: #475569;
+}
 
-      #locale table td .view-screenshot-btn {
-        color: blue;
-      }
+.log-content pre {
+  padding: 16px;
+  margin: 0;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 12.5px;
+  line-height: 1.6;
+  max-height: 600px;
+  overflow-y: auto;
+  color: #38bdf8;
+  white-space: pre-wrap;
+}
 
-      @media (max-width: 768px) {
-        .sidebar {
-          width: 16rem;
-          padding: 10px;
-        }
-      }
+.log-badge-info { color: #38bdf8; font-weight: 600; }
+.log-badge-warn { color: #f59e0b; font-weight: 600; }
+.log-badge-error { color: #ef4444; font-weight: 600; }
+
+/* Image Viewer Modal */
+.image-viewer {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 99999;
+}
 
-      .--hidden {
-        display: none !important;
-        visibility: hidden !important;
-      }
+.image-viewer-backdrop {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.75);
+  backdrop-filter: blur(4px);
+  cursor: pointer;
+}
 
-      #log {
-        display: flex;
-      }
+.image-container {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
+  width: 95vw;
+  height: 92vh;
+  max-width: 96vw;
+  max-height: 94vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  z-index: 100000;
+}
 
-      #log .title {
-        display: block;
-        flex: 1;
-      }
+.image-viewer-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--border);
+  background-color: var(--bg-card);
+  flex-shrink: 0;
+}
 
-      #log .log-content {
-        flex: 99;
-        background: white;
-        border-radius: 3px;
-        overflow: hidden;
-        padding: 1em;
-      }
+.image-viewer-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--foreground);
+}
 
-      #log .log-content pre {
-        height: 100%;
-        white-space: pre-line;
-        word-break: break-all;
-        padding: 0;
-        margin: 0;
-        width: 100%;
-        overflow: hidden;
-        overflow-y: auto;
-        user-select: all;
-      }
+.close-button {
+  background: var(--muted-bg);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  width: 30px;
+  height: 30px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  cursor: pointer;
+  color: var(--foreground);
+  line-height: 1;
+  transition: all 0.15s ease;
+}
 
-      body .context-image-viewer {
-        z-index: 9999;
-        width: 100vw;
-        height: 100vh;
-        display: flex;
-        flex-direction: column;
-        position: fixed;
-        top: 0;
-        left: 0;
-        background: #0000009c;
-      }
+.close-button:hover {
+  background-color: #ef4444;
+  color: #ffffff;
+  border-color: #ef4444;
+}
 
-      body .context-image-viewer .close-btn {
-        position: absolute;
-        right: 1.2%;
-        top: 0.65%;
-        color: #a7a5a5;
-        font-size: 2.8em;
-        cursor: pointer;
-        z-index: 1;
-      }
+.image-viewer-body {
+  flex: 1;
+  padding: 10px;
+  overflow: auto;
+  background-color: #0b0f19;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+}
 
-      body .context-image-viewer .close-btn:hover {
-        color: #000000a6;
-        transform: scale(1.04);
-        transition: all 0.15s ease-in-out;
-      }
+.image-viewer-body img {
+  max-width: 100%;
+  height: auto;
+  object-fit: contain;
+  border-radius: 4px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+}
 
-      body .context-image-viewer .loader {
-        width: 100vw;
-        height: 100vh;
-        z-index: 9999;
-        top: 0;
-        left: 0;
-        position: absolute;
-        background: #0000009c;
-        color: white;
-        text-align: center;
-        padding-top: 50vh;
-      }
+/* Context Pages & Modal Viewer Styles (Theme-compatible) */
+#overview .common-info {
+  background-color: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  margin-bottom: 20px;
+  display: flex;
+  flex-direction: column;
+}
 
-      body .context-image-viewer .viewer {
-        width: 98%;
-        height: 96%;
-        background-color: white;
-        margin: auto;
-        position: relative;
-      }
+#overview .common-info .title {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--foreground);
+  margin-bottom: 6px;
+  display: block;
+}
 
-      body .context-image-viewer .viewer .zoom-in-btn,
-      body .context-image-viewer .viewer .zoom-out-btn {
-        position: absolute;
-        bottom: 10%;
-        width: 35px;
-        height: 35px;
-        border-radius: 50%;
-        text-align: center;
-        background: #0000001a;
-        cursor: pointer;
-      }
+#overview .common-info .info {
+  font-size: 13.5px;
+  color: var(--text-muted);
+  line-height: 1.6;
+  margin: 0 0 16px 0;
+}
 
-      body .context-image-viewer .viewer .zoom-in-btn {
-        left: 51%;
-      }
+#overview .common-info .info strong {
+  color: var(--foreground);
+}
 
-      body .context-image-viewer .viewer .zoom-out-btn {
-        left: 47%;
-      }
+#overview .common-info .section {
+  flex: 1;
+  width: 100%;
+}
 
-      body .context-image-viewer .viewer .next-btn,
-      body .context-image-viewer .viewer .prev-btn {
-        width: 35px;
-        height: 35px;
-        border-radius: 50%;
-        text-align: center;
-        background: #0000001a;
-        cursor: pointer;
-        position: absolute;
-        top: 50%;
-      }
+.page-tiles {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding-top: 14px;
+  border-top: 1px solid var(--border);
+}
 
-      body .context-image-viewer .viewer .zoom-in-btn:hover,
-      body .context-image-viewer .viewer .zoom-out-btn:hover {
-        transform: scale(1.04);
-        transition: all 0.15s ease-in-out;
-      }
+.page-tiles .title-section {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 14px;
+  margin-bottom: 18px;
+}
 
-      body .context-image-viewer .viewer .zoom-in-btn span,
-      body .context-image-viewer .viewer .zoom-out-btn span {
-        display: inline-block;
-        margin-top: 12%;
-        font-size: 1.5em;
-      }
+.page-tiles .title-section .title-wrapper {
+  flex: 1;
+  min-width: 140px;
+}
 
-      body .context-image-viewer .viewer .next-btn:hover,
-      body .context-image-viewer .viewer .prev-btn:hover {
-        transform: scale(1.04);
-        transition: all 0.15s ease-in-out;
-      }
+.page-tiles .title-section .title-wrapper .title {
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--foreground);
+}
 
-      body .context-image-viewer .viewer .next-btn span,
-      body .context-image-viewer .viewer .prev-btn span {
-        display: inline-block;
-        margin-top: 15%;
-        font-size: 1.5em;
-      }
+.page-tiles .title-section .search-field-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: var(--text-muted);
+}
 
-      body .context-image-viewer .viewer .prev-btn {
-        left: 1%;
-      }
+.page-tiles .title-section .search-field-wrapper label {
+  font-weight: 500;
+  color: var(--text-muted);
+  white-space: nowrap;
+}
 
-      body .context-image-viewer .viewer .next-btn {
-        right: 1%;
-      }
+.page-tiles .title-section .search-field-wrapper #operator-filter {
+  padding: 5px 10px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background-color: var(--bg-card);
+  color: var(--foreground);
+  font-size: 13px;
+  outline: none;
+  cursor: pointer;
+}
 
-      body .context-image-viewer .viewer .wrapper {
-        display: flex;
-        flex-direction: column;
-        width: 100%;
-        height: 100%;
-        padding: 1.8%;
-      }
+.page-tiles .title-section .search-field-wrapper #search-input {
+  padding: 5px 10px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background-color: var(--bg-card);
+  color: var(--foreground);
+  font-size: 13px;
+  width: 220px;
+  outline: none;
+}
 
-      body .context-image-viewer .viewer .wrapper .toolbar .page-title-wrapper .page-title {
-        font-weight: 600;
-        max-width: 75%;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
+.page-tiles .title-section .search-field-wrapper #search-input:focus,
+.page-tiles .title-section .search-field-wrapper #operator-filter:focus,
+.page-tiles .title-section .locale-filter-wrapper #locale-filter:focus {
+  border-color: var(--accent);
+}
 
-      body .context-image-viewer .viewer .wrapper .toolbar .page-title-wrapper .page-count {
-        font-size: 0.7em;
-      }
+.page-tiles .title-section .locale-filter-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: var(--text-muted);
+}
 
-      body #overview .section .page-tiles .search-field-wrapper #search-input {
-        width: 55%;
-        height: 1.5em;
-        margin-left: 0.5%;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        border-radius: 3px;
-        border: 0.1px solid;
-      }
+.page-tiles .title-section .locale-filter-wrapper label {
+  font-weight: 500;
+  color: var(--text-muted);
+  white-space: nowrap;
+}
 
-      body #overview .section .page-tiles .search-field-wrapper #operator-filter {
-        width: fit-content;
-        height: 1.5em;
-        border-radius: 3px;
-      }
+.page-tiles .title-section .locale-filter-wrapper #locale-filter {
+  padding: 5px 10px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background-color: var(--bg-card);
+  color: var(--foreground);
+  font-size: 13px;
+  outline: none;
+  cursor: pointer;
+}
 
-      body #overview .section .page-tiles .search-field-wrapper {
-        flex: 33;
-        display: flex;
-        align-items: center;
-        gap: 1%;
-      }
+.page-tiles .tiles-list-wrapper {
+  width: 100%;
+  overflow-y: auto;
+  padding: 4px 0 20px 0;
+}
 
-      body .context-image-viewer .viewer .wrapper .toolbar .smart-compare-wrapper .switch-wrapper .switch-knob {
-        position: absolute;
-        width: 40%;
-        height: 86%;
-        border-radius: 50%;
-        background-color: white;
-        top: 50%;
-        left: 3%;
-        transform: translateY(-50%);
-        transition: left 0.3s;
-      }
+.page-tiles .tiles-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 16px;
+  width: 100%;
+}
 
-      body .context-image-viewer .viewer .wrapper .toolbar .smart-compare-wrapper .switch-wrapper {
-        position: relative;
-        width: 2.5em;
-        height: 1.3em;
-        border-radius: 2em;
-        background-color: gray;
-        cursor: pointer;
-      }
+.page-tiles .tiles-list .empty-context {
+  grid-column: 1 / -1;
+  text-align: center;
+  padding: 40px 20px;
+  color: var(--text-muted);
+  font-size: 14px;
+  font-weight: 500;
+}
 
-      body .context-image-viewer .viewer .wrapper .toolbar .smart-compare-wrapper {
-        display: flex;
-        align-items: center;
-        gap: 1%;
-        flex: 33;
-        justify-content: end;
-      }
+.page-tiles .tiles-list .tile-container {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  overflow: hidden;
+  cursor: pointer;
+  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
+  height: 190px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
 
-      body .context-image-viewer .viewer .wrapper .toolbar .page-title-wrapper {
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-        flex: 33;
-      }
+.page-tiles .tiles-list .tile-container:hover {
+  border-color: var(--accent);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
+}
 
-      body .context-image-viewer .viewer .wrapper .image-section .split-view .source-image-wrapper .locale-name-bar span,
-      body .context-image-viewer .viewer .wrapper .image-section .split-view .target-image-wrapper .locale-name-bar span {
-        opacity: 0.6;
-      }
+.page-tiles .tiles-list .tile-container .image {
+  width: 100%;
+  height: 148px;
+  object-fit: cover;
+  background-color: rgba(100, 116, 139, 0.08);
+  display: block;
+}
 
-      body .context-image-viewer .viewer .wrapper .image-section .split-view .source-image-wrapper .locale-name-bar,
-      body .context-image-viewer .viewer .wrapper .image-section .split-view .target-image-wrapper .locale-name-bar {
-        position: absolute;
-        background-color: #8080801f;
-        width: 9%;
-        height: 3.5%;
-        text-align: center;
-        margin: auto;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        padding: 0.5em;
-        bottom: 2.1rem;
-        left: 2rem;
-        border-radius: 3em;
-        color: #00000099;
-        font: status-bar;
-        font-weight: 500;
-      }
+.page-tiles .tiles-list .tile-container .name {
+  display: flex;
+  height: 42px;
+  border-top: 1px solid var(--border);
+  align-items: center;
+  padding: 0 10px;
+  background-color: var(--bg-card);
+  box-sizing: border-box;
+}
 
-      body .context-image-viewer .viewer .wrapper .image-section .split-view .source-image-wrapper,
-      body .context-image-viewer .viewer .wrapper .image-section .split-view .target-image-wrapper {
-        width: 100%;
-        height: 100%;
-        overflow: hidden;
-        flex: 1;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        border: 0.1px solid #00000021;
-        border-radius: 5px;
-      }
+.page-tiles .tiles-list .tile-container .name span {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--foreground);
+  letter-spacing: 0.2px;
+}
 
-      body .context-image-viewer .viewer .wrapper .image-section .split-view .source-image-wrapper img,
-      body .context-image-viewer .viewer .wrapper .image-section .split-view .target-image-wrapper img {
-        max-width: 100%;
-        max-height: 100%;
-        object-fit: contain;
-        transform: translate(0, 0) scale(1);
-        transition: transform 0.1s ease-out;
-        pointer-events: none;
-      }
+/* Modal Context Image Viewer */
+body .context-image-viewer {
+  z-index: 99999;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.82);
+  position: fixed;
+  backdrop-filter: blur(4px);
+  box-sizing: border-box;
+}
 
-      body .context-image-viewer .viewer .wrapper .image-section .split-view {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        gap: 0.5%;
-      }
+body .context-image-viewer .close-btn {
+  position: absolute;
+  right: 20px;
+  top: 14px;
+  color: #cbd5e1;
+  font-size: 34px;
+  line-height: 1;
+  cursor: pointer;
+  z-index: 100000;
+  transition: all 0.15s ease;
+}
 
-      body .context-image-viewer .viewer .wrapper .image-section {
-        display: flex;
-        flex: 95;
-        overflow: hidden;
-        width: 100%;
-        height: 100%;
-      }
+body .context-image-viewer .close-btn:hover {
+  color: #ffffff;
+  transform: scale(1.1);
+}
 
-      body .context-image-viewer .viewer .wrapper .toolbar {
-        border: 0.1px solid #00000021;
-        border-bottom: 0;
-        height: 7%;
-        border-radius: 5px;
-        padding: 0.5%;
-        padding-left: 1%;
-        padding-right: 1%;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: stretch;
-        flex: 4;
-      }
+body .context-image-viewer .loader {
+  width: 100vw;
+  height: 100vh;
+  position: absolute;
+  z-index: 100001;
+  top: 0;
+  left: 0;
+  color: #ffffff;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  font-weight: 600;
+  background: rgba(0, 0, 0, 0.5);
+}
 
-      body .dt-layout-row:first-of-type .dt-layout-cell {
-        display: table-cell;
-        width: 33.33%;
-        vertical-align: middle;
-        text-align: center;
-        padding: 8px;
-      }
-    
-      body .dt-layout-row:first-of-type .dt-layout-cell.dt-middle {
-          text-align: right;
-      }
-    
-      body .dt-layout-row:first-of-type .reset-filters-btn {
-        background-color: #555;
-        color: white;
-        border: none;
-        padding: 8px 16px;
-        font-size: 14px;
-        cursor: pointer;
-        border-radius: 4px;
-        transition: background-color 0.3s ease;
-      }
+body .context-image-viewer .viewer {
+  width: 96%;
+  height: 94%;
+  background-color: var(--bg-card, #ffffff);
+  color: var(--foreground, #0f172a);
+  margin: auto;
+  position: relative;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+  display: flex;
+  flex-direction: column;
+}
 
-      .--reduced-zoom {
-        zoom: 0.9123;
-      }
+body .context-image-viewer .viewer .wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
 
-      .--hide-overflow {
-        overflow: hidden;
-      }
+body .context-image-viewer .viewer .prev-btn,
+body .context-image-viewer .viewer .next-btn {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.55);
+  color: #ffffff;
+  cursor: pointer;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 100;
+  transition: all 0.15s ease;
+  user-select: none;
+}
 
-      .--disabled {
-        color: #00000014 !important;
-        background: #00000014 !important;
-        cursor: not-allowed !important;
-        transform: none !important;
-        transition: none !important;
-      }
+body .context-image-viewer .viewer .prev-btn { left: 16px; }
+body .context-image-viewer .viewer .next-btn { right: 16px; }
+
+body .context-image-viewer .viewer .prev-btn:hover,
+body .context-image-viewer .viewer .next-btn:hover {
+  background: rgba(0, 0, 0, 0.85);
+  transform: translateY(-50%) scale(1.1);
+}
+
+body .context-image-viewer .viewer .prev-btn span,
+body .context-image-viewer .viewer .next-btn span {
+  font-size: 22px;
+  font-weight: 300;
+  line-height: 1;
+}
+
+body .context-image-viewer .viewer .zoom-in-btn,
+body .context-image-viewer .viewer .zoom-out-btn {
+  position: absolute;
+  bottom: 20px;
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.6);
+  color: #ffffff;
+  cursor: pointer;
+  z-index: 100;
+  transition: all 0.15s ease;
+  user-select: none;
+}
+
+body .context-image-viewer .viewer .zoom-out-btn { left: calc(50% - 46px); }
+body .context-image-viewer .viewer .zoom-in-btn { left: calc(50% + 8px); }
+
+body .context-image-viewer .viewer .zoom-in-btn:hover,
+body .context-image-viewer .viewer .zoom-out-btn:hover {
+  background: rgba(0, 0, 0, 0.85);
+  transform: scale(1.1);
+}
+
+body .context-image-viewer .viewer .zoom-in-btn span,
+body .context-image-viewer .viewer .zoom-out-btn span {
+  font-size: 20px;
+  font-weight: 400;
+  line-height: 1;
+}
+
+body .context-image-viewer .viewer .wrapper .toolbar {
+  border-bottom: 1px solid var(--border);
+  background-color: var(--bg-card);
+  height: 52px;
+  padding: 0 20px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+  gap: 16px;
+}
+
+body .context-image-viewer .viewer .wrapper .toolbar .page-title-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  overflow: hidden;
+  flex: 1;
+}
+
+body .context-image-viewer .viewer .wrapper .toolbar .page-title-wrapper .page-count {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--accent);
+  background: rgba(234, 88, 12, 0.1);
+  padding: 3px 8px;
+  border-radius: 4px;
+  white-space: nowrap;
+}
+
+body .context-image-viewer .viewer .wrapper .toolbar .page-title-wrapper .page-title {
+  font-size: 14.5px;
+  font-weight: 600;
+  color: var(--foreground);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+body .context-image-viewer .viewer .wrapper .toolbar .context-switcher-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: var(--text-muted);
+}
+
+body .context-image-viewer .viewer .wrapper .toolbar .context-switcher-wrapper label {
+  white-space: nowrap;
+}
+
+body .context-image-viewer .viewer .wrapper .toolbar .context-switcher-wrapper select.context-dropdown {
+  padding: 4px 10px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background-color: var(--bg-card);
+  color: var(--foreground);
+  font-size: 13px;
+  max-width: 260px;
+  outline: none;
+  cursor: pointer;
+}
+
+body .context-image-viewer .viewer .wrapper .toolbar .smart-compare-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: var(--text-muted);
+  justify-content: flex-end;
+}
+
+body .context-image-viewer .viewer .wrapper .toolbar .smart-compare-wrapper .switch-wrapper {
+  position: relative;
+  width: 40px;
+  height: 22px;
+  border-radius: 20px;
+  background-color: #cbd5e1;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+body .context-image-viewer .viewer .wrapper .toolbar .smart-compare-wrapper .switch-wrapper .switch-knob {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: #ffffff;
+  top: 3px;
+  left: 4px;
+  transition: left 0.2s ease;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+body .context-image-viewer .viewer .wrapper .image-section {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+  width: 100%;
+  height: calc(100% - 52px);
+  background-color: var(--bg-body);
+  position: relative;
+}
+
+body .context-image-viewer .viewer .wrapper .image-section .split-view {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  gap: 12px;
+  padding: 14px;
+  box-sizing: border-box;
+}
+
+body .context-image-viewer .viewer .wrapper .image-section .split-view .source-image-wrapper,
+body .context-image-viewer .viewer .wrapper .image-section .split-view .target-image-wrapper {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background-color: var(--bg-card);
+  position: relative;
+}
+
+body .context-image-viewer .viewer .wrapper .image-section .split-view .source-image-wrapper img,
+body .context-image-viewer .viewer .wrapper .image-section .split-view .target-image-wrapper img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  transform: translate(0, 0) scale(1);
+  transition: transform 0.1s ease-out;
+  pointer-events: none;
+}
+
+body .context-image-viewer .viewer .wrapper .image-section .split-view .source-image-wrapper .locale-name-bar,
+body .context-image-viewer .viewer .wrapper .image-section .split-view .target-image-wrapper .locale-name-bar {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  background-color: rgba(15, 23, 42, 0.75);
+  color: #ffffff;
+  padding: 4px 10px;
+  border-radius: 4px;
+  font-size: 11.5px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  z-index: 5;
+  pointer-events: none;
+}
+
+body .context-image-viewer .viewer .wrapper .image-section .split-view .source-image-wrapper .locale-name-bar span,
+body .context-image-viewer .viewer .wrapper .image-section .split-view .target-image-wrapper .locale-name-bar span {
+  opacity: 0.95;
+}
 
-      .--disabled:hover {
-        color: #00000014 !important;
-        background: #00000014 !important;
-        transform: none !important;
-        transition: none !important;
-      }`;
+.--hidden {
+  display: none !important;
+}
+
+.--disabled {
+  opacity: 0.3 !important;
+  cursor: not-allowed !important;
+  pointer-events: none !important;
+}
+
+/* ApexCharts theme adjustments */
+.apexcharts-tooltip.apexcharts-theme-dark {
+  background: #18181b !important;
+  border: 1px solid #27272a !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
+}
+
+.apexcharts-text {
+  fill: var(--text-muted) !important;
+}
+`;
 }
 function renderHtml({
   appName,
   reportTime,
+  body,
   script,
   style,
-  body,
   dataFilePaths = [],
   logData
 }) {
+  const dataScripts = dataFilePaths.map((v) => '<script src="' + v + '" type="text/javascript"><\/script>').join("\n    ");
+  const logScript = logData ? '<script type="text/javascript">window.logData = ' + JSON.stringify(logData) + ";<\/script>" : "";
   return `<!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-theme="light">
   <head>
     <meta charset="UTF-8" />
     <meta name="charset" content="charset='UTF-8'" />
@@ -1549,177 +1830,153 @@ function renderHtml({
     <meta name="product" content="zAutomate.AI" />
     <meta name="author" content="Jitendra Maheshwari" />
     <meta name="email" content="jm@zeesoft.com" />
-    <meta
-      name="description"
-      content="zAutomate.AI report"
-    />
-    <title>${appName} - zAutomate.AI report | ${reportTime}</title>
-        <!-- 3rd party dependencies -->
-    <link
-      rel="stylesheet"
-      href="https://cdn.datatables.net/2.0.3/css/dataTables.dataTables.min.css"
-    />
-    ${dataFilePaths.map(
-    (v) => `<script
-      src="${v}"
-      type="text/javascript">
-    <\/script>`
-  ).join("")}
-      ${logData ? `<script type="text/javascript" async/>window.logData = \`${logData}\`;<\/script>` : ""}
-    <script
-      src="https://code.jquery.com/jquery-3.7.1.slim.min.js"
-      integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8="
-      crossorigin="anonymous"
-      defer
-    ><\/script>
-    <script src="https://cdn.jsdelivr.net/npm/apexcharts" defer><\/script>
-    <script
-      src="https://cdn.datatables.net/2.0.3/js/dataTables.min.js"
-      defer
-    ><\/script>
-    <style>
-      ${style}
-    </style>
-  </head>
-  <body>
-    ${body}
-  </body>
-  <script type="text/javascript" defer>
-    ${script}
-  <\/script>
-</html>
-`;
+    <meta name="description" content="` + appName + ' - zAutomate.AI Quality Automation Report" />\n    <title>' + appName + " - zAutomate.AI Report | " + reportTime + '</title>\n    \n    <!-- Google Fonts: Inter, Outfit, JetBrains Mono -->\n    <link rel="preconnect" href="https://fonts.googleapis.com" />\n    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />\n    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Outfit:wght@500;600;700;800&display=swap" rel="stylesheet" />\n    \n    <!-- DataTables CSS -->\n    <link rel="stylesheet" href="https://cdn.datatables.net/2.0.3/css/dataTables.dataTables.min.css" />\n    \n    <!-- Early Theme Detection -->\n    <script>\n      (function() {\n        try {\n          var params = new URLSearchParams(window.location.search);\n          var themeParam = params.get("theme");\n          var storedTheme = localStorage.getItem("zqa_report_theme");\n          var systemDark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;\n          var activeTheme = themeParam || storedTheme || (systemDark ? "dark" : "light");\n          document.documentElement.setAttribute("data-theme", activeTheme);\n          if (params.get("standalone") === "false") {\n            document.documentElement.classList.add("embedded");\n          }\n        } catch(e) {}\n      })();\n    <\/script>\n    \n    ' + dataScripts + "\n    " + logScript + '\n    \n    <script src="https://code.jquery.com/jquery-3.7.1.slim.min.js" integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8=" crossorigin="anonymous" defer><\/script>\n    <script src="https://cdn.jsdelivr.net/npm/apexcharts" defer><\/script>\n    <script src="https://cdn.datatables.net/2.0.3/js/dataTables.min.js" defer><\/script>\n    <style>\n      ' + style + "\n    </style>\n  </head>\n  <body>\n    " + body + '\n  </body>\n  <script type="text/javascript" defer>\n    ' + script + "\n  <\/script>\n</html>\n";
 }
 const menuBar = () => `(() => {
-        // for sidebar menu
-        // hide insights tab
-        if(DataStore.hasRuntimeError() || !DataStore.ranSuccessfully() || DataStore.isContextRun()) {
-          document.querySelector('.menu-item[data-page="insights"]')?.remove();
-        }
-
-        const loadContent = (section, highlightMenu = false) => {
-          if (highlightMenu) {
-            document
-              .querySelector('li[data-page="overview"]')
-              ?.classList.add('selected');
-          }
-
-          const contents = document.querySelectorAll('.content');
-          const wrapper = document.querySelector('.content-wrapper');
-
-          contents.forEach((content) => {
-            content.id !== section
-              ? content.classList.remove('active')
-              : content.classList.add('active');
-
-            section === 'overview' &&
-              window.persistOverviewCharts &&
-              window.persistOverviewCharts();
-
-            ['log', 'locale'].includes(section) ? wrapper.classList.add('--hide-overflow') : !DataStore.isContextRun() && !DataStore.isSanityRun() && wrapper.classList.remove('--hide-overflow');
-            window.currentPage = section;
-          });
-        };
-
-        document.addEventListener('DOMContentLoaded', function () {
-          const createMenuItems = (() => {
-            if(DataStore.isContextRun()) {
-              return;
-            }
-            const ul = document.querySelector('.sidebar .submenu');
-            const createListItems = (locale) => {
-              const li = document.createElement('li');
-              li.classList.add('sub-menu-item');
-              li.dataset.locale = locale;
-
-              const a = document.createElement('a');
-              a.href = '#';
-              a.textContent = locale;
-
-              li.appendChild(a);
-              return li;
-            };
-
-            for (const locale of DataStore.getLocales()) {
-              ul.appendChild(createListItems(locale));
-            }
-          })();
-
-          const menuItems = document.querySelectorAll('.menu-item'),
-            submenuItems = document.querySelectorAll('.sub-menu-item');
-
-          menuItems.forEach((item) => {
-            item.addEventListener('click', function (event) {
-              const selectedMenuItem = document.querySelector(
-                  '.menu-item.selected'
-                ),
-                selectedSubmenu = document.querySelector('.submenu.active'),
-                page = item.dataset.page;
+  if (DataStore.hasRuntimeError() || !DataStore.ranSuccessfully() || DataStore.isContextRun()) {
+    var insightTab = document.querySelector('#insightsTabDropdown') || document.querySelector('[data-page="insights"]');
+    if (insightTab) insightTab.remove();
+  }
 
-              if (selectedMenuItem) {
-                selectedMenuItem.classList.remove('selected');
-              }
+  var loadContent = function(section, highlightMenu = false) {
+    if (highlightMenu) {
+      document.querySelectorAll('.tab-item').forEach(function(b) { b.classList.remove('selected'); });
+      var ovTab = document.querySelector('.tab-item[data-page="overview"]');
+      if (ovTab) ovTab.classList.add('selected');
+    }
+    var contents = document.querySelectorAll('.content');
+    contents.forEach(function(content) {
+      if (content.id !== section) {
+        content.classList.remove('active');
+      } else {
+        content.classList.add('active');
+      }
+    });
+    if (section === 'overview' && window.persistOverviewCharts) {
+      window.persistOverviewCharts();
+    }
+    window.currentPage = section;
+  };
 
-              if (selectedSubmenu) {
-                selectedSubmenu.classList.remove('active');
-              }
+  document.addEventListener('DOMContentLoaded', function() {
+    if (!DataStore.isContextRun()) {
+      var ul = document.querySelector('.tabs-list .submenu');
+      if (ul) {
+        ul.innerHTML = '';
+        DataStore.getLocales().forEach(function(locale) {
+          var li = document.createElement('li');
+          li.classList.add('sub-menu-item');
+          li.dataset.locale = locale;
+          var a = document.createElement('a');
+          a.href = '#';
+          a.innerHTML = '<span class="locale-code">' + locale + '</span>';
+          li.appendChild(a);
+          ul.appendChild(li);
+        });
+      }
+    }
 
-              if (item.classList.contains('has-submenu')) {
-                event.preventDefault();
-                item.classList.add('selected');
-                const submenu = item.querySelector('.submenu');
-                submenu.classList.add('active');
-              } else {
-                item.classList.add('selected');
-              }
+    var tabButtons = document.querySelectorAll('.tab-item');
+    tabButtons.forEach(function(btn) {
+      btn.addEventListener('click', function(event) {
+        var page = btn.dataset.page;
+        if (btn.classList.contains('has-submenu')) {
+          event.preventDefault();
+          var submenu = btn.parentElement.querySelector('.submenu');
+          if (submenu) {
+            submenu.classList.toggle('active');
+          }
+          tabButtons.forEach(function(b) { b.classList.remove('selected'); });
+          btn.classList.add('selected');
+          loadContent('insights');
+        } else {
+          tabButtons.forEach(function(b) { b.classList.remove('selected'); });
+          btn.classList.add('selected');
+          var activeSubmenu = document.querySelector('.submenu.active');
+          if (activeSubmenu) activeSubmenu.classList.remove('active');
+          loadContent(page);
+        }
+      });
+    });
 
-              if (selectedSubmenu) {
-                selectedSubmenu
-                  .querySelectorAll('.sub-menu-item')
-                  .forEach((submenuItem) => {
-                    submenuItem.textContent !== item.textContent &&
-                      submenuItem.classList.remove('selected');
-                  });
-              }
+    document.addEventListener('click', function(e) {
+      if (!e.target.closest('.tab-dropdown')) {
+        var openSub = document.querySelector('.submenu.active');
+        if (openSub) openSub.classList.remove('active');
+      }
+    });
 
-              loadContent(page);
-            });
+    document.addEventListener('click', function(e) {
+      var sItem = e.target.closest('.sub-menu-item');
+      if (sItem) {
+        e.preventDefault();
+        e.stopPropagation();
+        var openSub = document.querySelector('.submenu.active');
+        if (openSub) openSub.classList.remove('active');
+        tabButtons.forEach(function(b) { b.classList.remove('selected'); });
+        var insBtn = document.querySelector('.tab-item[data-page="insights"]');
+        if (insBtn) insBtn.classList.add('selected');
+        loadContent('locale');
+        if (window.renderLocaleGrid) {
+          window.renderLocaleGrid(sItem.dataset.locale);
+        }
+      }
+    });
 
-            loadContent('overview', true);
-          });
+    var backBtn = document.getElementById('backToInsightsBtn');
+    if (backBtn) {
+      backBtn.addEventListener('click', function() {
+        tabButtons.forEach(function(b) { b.classList.remove('selected'); });
+        var insBtn = document.querySelector('.tab-item[data-page="insights"]');
+        if (insBtn) insBtn.classList.add('selected');
+        loadContent('insights');
+      });
+    }
 
-          submenuItems.forEach((sItem) => {
-            sItem.addEventListener('click', function (event) {
-              const selectedSubMenuItem = document.querySelector(
-                '.sub-menu-item.selected'
-              );
-              event.preventDefault();
-              event.stopPropagation();
+    var productNameEl = document.getElementById('productName');
+    if (productNameEl) productNameEl.textContent = DataStore.getAppName() || 'Application';
+
+    var modeLabelEl = document.getElementById('modeLabel');
+    var modePillEl = document.getElementById('modePill');
+    if (modeLabelEl && modePillEl) {
+      if (DataStore.isSanityRun()) {
+        modeLabelEl.textContent = 'Quick Sanity';
+        modePillEl.className = 'mode-pill mode-sanity';
+      } else if (DataStore.isContextRun()) {
+        modeLabelEl.textContent = 'Context Creation';
+        modePillEl.className = 'mode-pill mode-context';
+      } else {
+        modeLabelEl.textContent = 'i18n Verification';
+        modePillEl.className = 'mode-pill mode-i18n';
+      }
+    }
 
-              if (selectedSubMenuItem) {
-                selectedSubMenuItem.classList.remove('selected');
-                window.previousSelectedLocale =
-                  selectedSubMenuItem.dataset.locale;
-              }
+    var statusPillEl = document.getElementById('statusPill');
+    var statusLabelEl = document.getElementById('statusLabel');
+    var hasError = DataStore.hasRuntimeError() || !DataStore.ranSuccessfully();
+    if (statusPillEl && statusLabelEl) {
+      if (hasError) {
+        statusPillEl.className = 'status-pill status-failed';
+        statusLabelEl.textContent = 'Failed';
+      } else {
+        statusPillEl.className = 'status-pill status-passed';
+        statusLabelEl.textContent = 'Passed';
+      }
+    }
 
-              sItem.classList.add('selected');
-              loadContent('locale');
-            });
-          });
+    var timestampEl = document.getElementById('reportTimestamp');
+    if (timestampEl) {
+      try {
+        var ts = DataStore.getTimestamp();
+        timestampEl.textContent = ts ? new Date(ts).toLocaleString() : new Date().toLocaleString();
+      } catch(e) {
+        timestampEl.textContent = new Date().toLocaleString();
+      }
+    }
 
-          // update footer info
-          const footer = document.querySelector('.sidebar .footer');
-          footer.textContent = \`\${new Date().getFullYear()} @ Zeesoft. All rights reserved.\`;
-
-          // update project info
-          document.querySelector(
-            'header .logo'
-          ).innerHTML = \`zAutomate.AI | \${DataStore.getAppName()} [\${DataStore.isSanityRun() ? 'Quick Sanity' : DataStore.isContextRun() ? 'Context Creation' : 'I18n Verification'}]\`;
-          document.querySelector(
-            'header .report-timestamp .info'
-          ).innerHTML = \`Report generated at: \${toLocaleString(Datastore.getTimestamp())}\`;
-        });
-      })();`;
+    loadContent('overview', true);
+  });
+})();`;
 const overview = () => `//overview content
     (() => {
       if (DataStore.hasRuntimeError()) {
@@ -2132,6 +2389,12 @@ const overview = () => `//overview content
                         targetImageEl.onload = () => {
                           hasTargetLoaded = true;
                         };
+                        sourceImageEl.onerror = () => {
+                          showLoader(false);
+                        };
+                        targetImageEl.onerror = () => {
+                          showLoader(false);
+                        };
                       }
                     }
                     else {
@@ -2598,6 +2861,18 @@ const overview = () => `//overview content
 
             titleEl.textContent = title;
             infoEl.innerHTML = info;
+            if (DataStore.isSanityRun()) {
+              var sec = document.querySelector('#overview .common-info .section');
+              if (sec) {
+                sec.innerHTML = '';
+                var logBtn = document.createElement('button');
+                logBtn.type = 'button';
+                logBtn.className = 'btn-view-log';
+                logBtn.innerHTML = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="4 17 10 11 4 5"/><line x1="12" x2="20" y1="19" y2="19"/></svg><span>View Log →</span>';
+                logBtn.addEventListener('click', function() { var lb = document.querySelector('.tab-item[data-page="log"]'); if (lb) lb.click(); });
+                sec.appendChild(logBtn);
+              }
+            }
           }
 
           return;
@@ -3671,6 +3946,9 @@ const localeGrid = () => `// locale grid
         }
 
         document.addEventListener('DOMContentLoaded', function () {
+          document.getElementById('backToInsightsBtn')?.addEventListener('click', function() {
+            document.querySelector('.tab-item[data-page="insights"]')?.click();
+          });
           let table;
           document.querySelectorAll('.sub-menu-item').forEach((menu) => {
             menu.addEventListener('click', (e) => {
@@ -3736,7 +4014,8 @@ const localeGrid = () => `// locale grid
                     searchable: false,
                     data: null,
                     render: function (data) {
-                      return \`<a href="#" class="view-screenshot-btn" onclick="openImageViewer('\${data[1]}')"><img title="View screenshot for '\${data[0]}'" class="view-screenshot-image"></img></a\`;
+                      if (!data || !data[1]) return '<span style="color: var(--text-muted);">-</span>';
+                      return \`<a href="javascript:void(0)" class="view-screenshot-btn" data-image="\${data[1]}" onclick="openImageViewer('\${data[1]}')" title="View screenshot for '\${data[0]}'"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg><span>View</span></a>\`;
                     },
                     className: 'dt-head-center dt-body-center'
                   }
@@ -3761,7 +4040,8 @@ const localeGrid = () => `// locale grid
                     searchable: false,
                     data: null,
                     render: function (data) {
-                      return \`<a href="#" class="view-screenshot-btn" onclick="openImageViewer('\${data[3]}')"><img title="View screenshot for '\${data[2]}'" class="view-screenshot-image"></img></a>\`;
+                      if (!data || !data[3]) return '<span style="color: var(--text-muted);">-</span>';
+                      return \`<a href="javascript:void(0)" class="view-screenshot-btn" data-image="\${data[3]}" onclick="openImageViewer('\${data[3]}')" title="View screenshot for '\${data[2]}'"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg><span>View</span></a>\`;
                     },
                     className: 'dt-head-center dt-body-center'
                   }
@@ -3867,6 +4147,7 @@ const localeGrid = () => `// locale grid
           };
 
           const render = (locale) => {
+            window.renderLocaleGrid = render;
             if (table) {
               table.destroy();
             }
@@ -3975,62 +4256,172 @@ const data = (metaData) => `// DataStore
         DataStore = new SimpleDataStore();
       })();`;
 const global = () => `var DataStore;
-      // global functions
-      function openImageViewer(imageSrc) {
-        var imageView = document.getElementById('imageView');
-        imageView.src = \`\${window.getProductUrl()}/\${imageSrc}\`;
-        document.getElementById('imageViewer').style.display = 'block';
-      }
+window.initTheme = function() {
+  try {
+    var params = new URLSearchParams(window.location.search);
+    var themeParam = params.get("theme");
+    var storedTheme = localStorage.getItem("zqa_report_theme");
+    var systemDark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+    var activeTheme = themeParam || storedTheme || (systemDark ? "dark" : "light");
+    document.documentElement.setAttribute("data-theme", activeTheme);
+  } catch(e) {}
+};
 
-      function closeImageViewer() {
-        delete document.getElementById('imageView').src;
-        document.getElementById('imageViewer').style.display = 'none';
-      }
+function openImageViewer(imageSrc) {
+  var imageView = document.getElementById("imageView");
+  if (imageView) {
+    imageView.src = window.getProductUrl() + "/" + imageSrc;
+  }
+  var viewer = document.getElementById("imageViewer");
+  if (viewer) {
+    viewer.style.display = "block";
+  }
+}
 
-      document.addEventListener('DOMContentLoaded', () => {
-        document.addEventListener('keydown', (e) => {
-         const viewer = document.getElementById('imageViewer');
-          if (e.key === 'Escape' && viewer && viewer.style.display === 'block') {
-            closeImageViewer();
-          }
-        });
+function closeImageViewer() {
+  var imageView = document.getElementById("imageView");
+  if (imageView) {
+    imageView.src = "";
+  }
+  var viewer = document.getElementById("imageViewer");
+  if (viewer) {
+    viewer.style.display = "none";
+  }
+}
+
+window.openImageViewer = openImageViewer;
+window.closeImageViewer = closeImageViewer;
+
+document.addEventListener("DOMContentLoaded", function() {
+  window.initTheme();
+});
+
+document.addEventListener('click', function(e) {
+  var btn = e.target.closest('.view-screenshot-btn');
+  if (btn) {
+    e.preventDefault();
+    var imgPath = btn.getAttribute('data-image') || (btn.getAttribute('onclick') && btn.getAttribute('onclick').match(/'([^']+)'/)?.[1]);
+    if (imgPath && typeof window.openImageViewer === 'function') {
+      window.openImageViewer(imgPath);
+    }
+    return;
+  }
+
+  var closeBtn = e.target.closest('.close-button') || (e.target.classList && e.target.classList.contains('image-viewer-backdrop'));
+  if (closeBtn) {
+    e.preventDefault();
+    if (typeof window.closeImageViewer === 'function') {
+      window.closeImageViewer();
+    }
+  }
+});
+
+document.addEventListener('keydown', function(e) {
+  if (e.key === 'Escape') {
+    if (typeof window.closeImageViewer === 'function') {
+      window.closeImageViewer();
+    }
+  }
+});
+
+window.getProductUrl = function() {
+  if (window.productUrl) {
+    return window.productUrl;
+  }
+  try {
+    var href = window.location.href.split('?')[0].split('#')[0];
+    var dir = href.substring(0, href.lastIndexOf('/'));
+    window.productUrl = dir;
+    return window.productUrl;
+  } catch (e) {
+    var m = window.location.pathname.match(/^.+[^\\/report\\.html]/g);
+    window.productUrl = window.location.protocol + "//" + window.location.host + (m ? m[0] : "");
+    return window.productUrl;
+  }
+};
+var params = new URLSearchParams(location.href.match(/(\\?.*$)/g)?.[0] || "");
+window.isStandaloneReport = params.size ? (params.get("standalone") === "true") : true;
+`;
+const log = () => `(() => {
+  document.addEventListener("DOMContentLoaded", function() {
+    var rawLog = window.logData || (DataStore.hasRuntimeError() ? 'We are facing internal issue. Please try again after sometime.' : 'No log data found!');
+    var logPre = document.getElementById("logPre");
+    var copyBtn = document.getElementById("copyLogBtn");
+    var searchInput = document.getElementById("logSearchInput");
+    var currentFilteredText = rawLog;
+
+    var colorizeAndRender = function(filterText) {
+      if (!logPre) return;
+      var lines = rawLog.split("\\n");
+      var filtered = filterText ? lines.filter(function(l) { return l.toLowerCase().indexOf(filterText.toLowerCase()) !== -1; }) : lines;
+      currentFilteredText = filtered.join("\\n");
+      var html = filtered.map(function(line) {
+        var formatted = line.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+        formatted = formatted.replace(/\\[INFO\\]/g, '<span class="log-badge-info">[INFO]</span>');
+        formatted = formatted.replace(/\\[WARN\\]/g, '<span class="log-badge-warn">[WARN]</span>');
+        formatted = formatted.replace(/\\[ERROR\\]/g, '<span class="log-badge-error">[ERROR]</span>');
+        return formatted;
+      }).join("\\n");
+      logPre.innerHTML = html;
+    };
+
+    colorizeAndRender();
+
+    if (searchInput) {
+      searchInput.addEventListener("input", function(e) {
+        colorizeAndRender(e.target.value.trim());
       });
+    }
 
-      //to dynamically show/hide header based upon query param: ?standalone=<true|false>
-      window.getProductUrl = () => {
-        if (window.productUrl) {
-          return window.productUrl;
-        } else {
-          window.productUrl = \`\${window.location.protocol}//\${
-            window.location.host
-          }\${window.location.pathname.match(/^.+[^\\/report\\.html]/g)?.[0]}\`;
-          return window.productUrl;
-        }
+    if (copyBtn) {
+      var showCopied = function() {
+        copyBtn.innerHTML = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg><span style="color: #10b981;">Copied!</span>';
+        setTimeout(function() {
+          copyBtn.innerHTML = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg><span>Copy</span>';
+        }, 2000);
       };
-      const params = new URLSearchParams(location.href.match(/(\\?.*$)/g)?.[0]);
-      if (params.size) {
-        window.isStandaloneReport = params.get('standalone') === 'true';
-        if(!window.isStandaloneReport) {
-          const overview = document.getElementById('overview');
-          if(overview) {
-            overview.classList.add('--reduced-zoom');
+
+      var fallbackCopy = function(text) {
+        var textArea = document.createElement("textarea");
+        textArea.value = text;
+        textArea.style.position = "fixed";
+        textArea.style.top = "-9999px";
+        textArea.style.left = "-9999px";
+        textArea.style.opacity = "0";
+        textArea.setAttribute("readonly", "");
+        document.body.appendChild(textArea);
+        textArea.focus();
+        textArea.select();
+        textArea.setSelectionRange(0, textArea.value.length);
+        try {
+          var successful = document.execCommand("copy");
+          document.body.removeChild(textArea);
+          if (successful) {
+            showCopied();
+          } else {
+            console.error("document.execCommand copy was unsuccessful");
           }
+        } catch (err) {
+          document.body.removeChild(textArea);
+          console.error("Fallback copy error:", err);
         }
-      } else {
-        window.isStandaloneReport = true;
-      }`;
-const log = () => `// log content
-    (() => {
-      document.addEventListener('DOMContentLoaded', function () {
-        const pre = document.querySelector('#log .log-content pre');
-        pre.textContent = 'Loading...';
-        document
-          .querySelector('li[data-page="log"]')
-          ?.addEventListener('click', (e) => {
-            pre.textContent = window.logData || (DataStore.hasRuntimeError() ? 'We are facing internal issue. Please try again after sometime.' : 'No log data found!');
+      };
+
+      copyBtn.addEventListener("click", function() {
+        var textToCopy = currentFilteredText || rawLog;
+        if (navigator.clipboard && typeof navigator.clipboard.writeText === "function") {
+          navigator.clipboard.writeText(textToCopy).then(function() {
+            showCopied();
+          }).catch(function() {
+            fallbackCopy(textToCopy);
           });
+        } else {
+          fallbackCopy(textToCopy);
+        }
       });
-    })();`;
+    }
+  });
+})();`;
 const getJsData = (metaData) => `${global()}
       ${data(metaData)}
       ${menuBar()}