@zeesoft/i18n-verify 3.4.5 → 3.4.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/executor.mjs +746 -685
  2. package/package.json +1 -1
package/dist/executor.mjs CHANGED
@@ -470,7 +470,7 @@ class BaseReport {
470
470
  }
471
471
  }
472
472
  function getBodyData() {
473
- 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>\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="insights" id="insightsTabBtn">\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 </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" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><line x1="10" y1="9" x2="8" y2="9"/></svg>\n <span>View Log</span>\n </button>\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"></div>\n <div class="analytics-card card">\n <div class="analytics-card-header">\n <div class="analytics-title-group">\n <span class="title">i18n Reports Overview</span>\n <p class="analytics-subtitle">Consolidated internationalization and localization metrics across reviewed strings, numbers, dates, and skipped elements</p>\n </div>\n </div>\n <div class="analytics-grid">\n <div class="chart-panel string-quality">\n <div class="panel-header">\n <div class="panel-title-row">\n <span class="panel-title">String localization, untranslated & skipped items</span>\n <span class="tooltip-icon" data-tooltip="Overall distribution of translated strings, unlocalized strings, encoding defects, and skipped items (DNT, Ignored, User Inputs)."><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg></span>\n </div>\n <span class="panel-desc">String localization, untranslated &amp; skipped items</span>\n </div>\n <div class="string-quality-content">\n <div class="graph string-pie-graph"></div>\n <div class="string-legend-container"></div>\n </div>\n </div>\n <div class="chart-panel number-quality">\n <div class="panel-header">\n <div class="panel-title-row">\n <span class="panel-title">Numeric &amp; Currency Coverage</span>\n <span class="tooltip-icon" data-tooltip="Checks for numeric values, percentages, and currencies formatted according to locale rules."><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg></span>\n </div>\n <span class="panel-desc">Numeric, Currency &amp; Percentage localization</span>\n </div>\n <div class="graph"></div>\n </div>\n <div class="chart-panel datetime-quality">\n <div class="panel-header">\n <div class="panel-title-row">\n <span class="panel-title">DateTime Coverage</span>\n <span class="tooltip-icon" data-tooltip="Verification of date, time, and datetime patterns formatted according to locale conventions."><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg></span>\n </div>\n <span class="panel-desc">Date, Time &amp; Combined DateTime formats</span>\n </div>\n <div class="graph"></div>\n </div>\n </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="log-viewer-card card">\n <div class="log-toolbar">\n <div class="log-toolbar-left">\n <div class="log-heading">\n <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><line x1="10" y1="9" x2="8" y2="9"/></svg>\n <span>Execution Logs</span>\n </div>\n <div class="log-stat-badges">\n <span class="log-badge-stat stat-all" id="logStatTotal">Total: 0</span>\n <span class="log-badge-stat stat-info" id="logStatInfo">Info: 0</span>\n <span class="log-badge-stat stat-warn" id="logStatWarn">Warn: 0</span>\n <span class="log-badge-stat stat-error" id="logStatError">Error: 0</span>\n </div>\n </div>\n <div class="log-toolbar-right">\n <div class="log-level-pills" id="logLevelPills">\n <button type="button" class="log-level-btn active" data-level="ALL">All</button>\n <button type="button" class="log-level-btn" data-level="INFO">Info</button>\n <button type="button" class="log-level-btn" data-level="WARN">Warn</button>\n <button type="button" class="log-level-btn" data-level="ERROR">Error</button>\n </div>\n <div class="log-search-container">\n <svg class="search-svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>\n <input type="text" id="logSearchInput" class="log-search-field" placeholder="Search log lines..." />\n </div>\n <button class="log-tool-btn" id="wrapToggleBtn" type="button" title="Toggle line wrap">\n <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="15" y2="12"/><path d="M21 12h-4a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h4"/><line x1="3" y1="18" x2="17" y2="18"/></svg>\n <span>Wrap</span>\n </button>\n <button class="log-tool-btn 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-stream-wrapper" id="logStreamWrapper">\n <div class="log-lines" id="logLines"></div>\n </div>\n </div>\n </div>\n <div id="insights" class="content">\n <div class="insights-card card">\n <div class="insights-card-header">\n <div class="insights-header-left">\n <span class="title">Locale Quality Insights</span>\n <p class="insights-subtitle">Cross-locale comparison across verification metrics, localization status, and formatting health</p>\n </div>\n <div class="insights-header-right">\n <div class="insights-search-wrapper">\n <svg class="search-svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>\n <input type="text" id="insightsSearchInput" class="insights-search-field" placeholder="Filter metrics / rows..." />\n </div>\n </div>\n </div>\n <div class="insights-table-container">\n <table class="insights-table" id="insightsTable">\n <thead id="insightsTableHead"></thead>\n <tbody id="insightsTableBody"></tbody>\n </table>\n </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 <div id="screenshotGalleryModal" class="screenshot-gallery-modal" style="display:none;">\n <div class="gallery-modal-backdrop" onclick="closeScreenshotGallery()"></div>\n <div class="gallery-modal-dialog">\n <div class="gallery-modal-header">\n <div class="gallery-header-info">\n <span class="gallery-modal-title" id="galleryModalTitle">Screenshots</span>\n <span class="gallery-modal-badge" id="galleryModalBadge">0 items</span>\n </div>\n <button type="button" class="gallery-close-btn" onclick="closeScreenshotGallery()" title="Close (Esc)">&times;</button>\n </div>\n <div class="gallery-modal-body">\n <div class="gallery-preview-container">\n <div class="gallery-image-wrapper">\n <img id="galleryMainImg" src="" alt="Screenshot Preview" />\n <button type="button" class="gallery-nav-btn prev-btn" id="galleryPrevBtn" title="Previous (Left Arrow)">\n <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg>\n </button>\n <button type="button" class="gallery-nav-btn next-btn" id="galleryNextBtn" title="Next (Right Arrow)">\n <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg>\n </button>\n <button type="button" class="gallery-fullscreen-btn" id="galleryFullscreenBtn" title="Open Full View">\n <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></svg>\n <span>Full View</span>\n </button>\n </div>\n <div class="gallery-item-details" id="galleryItemDetails">\n <div class="gallery-meta-row">\n <span class="gallery-counter" id="galleryCounter">Item 1 of 1</span>\n <span class="gallery-page-badge" id="galleryPageBadge">Page: Main</span>\n </div>\n <div class="gallery-text-box">\n <span class="gallery-text-label">Used String / Value:</span>\n <span class="gallery-text-val" id="galleryTextVal">--</span>\n </div>\n </div>\n </div>\n <div class="gallery-thumbnails-strip" id="galleryThumbnailsStrip"></div>\n </div>\n </div>\n </div>\n</main>';
473
+ return '<header class="report-header">\n<div class="header-left">\n <div class="mode-pill mode-sanity" id="modePill" title="Execution Mode: Test execution mode (Quick Sanity, Context Creation, or i18n Verification)">\n <span class="mode-dot"></span>\n <span class="pill-prefix">Mode:</span>\n <span class="mode-label" id="modeLabel">Quick Sanity</span>\n </div>\n <div class="status-pill status-passed" id="statusPill" title="Execution Status: Indicates the overall outcome of the test run (Passed or Failed)">\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="pill-prefix">Status:</span>\n <span class="status-label" id="statusLabel">Passed</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="insights" id="insightsTabBtn">\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 </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" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><line x1="10" y1="9" x2="8" y2="9"/></svg>\n <span>View Log</span>\n </button>\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"></div>\n <div class="analytics-card card">\n <div class="analytics-card-header">\n <div class="analytics-title-group">\n <span class="title">i18n Reports Overview</span>\n <p class="analytics-subtitle">Consolidated internationalization and localization metrics across reviewed strings, numbers, dates, and skipped elements</p>\n </div>\n </div>\n <div class="analytics-grid">\n <div class="chart-panel string-quality">\n <div class="panel-header">\n <div class="panel-title-row">\n <span class="panel-title">Localize Coverage</span>\n <span class="tooltip-icon" data-tooltip="Overall distribution of translated strings, unlocalized strings, encoding defects, and skipped items."><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg></span>\n </div>\n <span class="panel-desc">String localization, untranslated &amp; skipped items</span>\n </div>\n <div class="string-quality-content">\n <div class="graph string-pie-graph"></div>\n <div class="string-legend-container"></div>\n </div>\n </div>\n <div class="chart-panel number-quality">\n <div class="panel-header">\n <div class="panel-title-row">\n <span class="panel-title">Numeric &amp; Currency Coverage</span>\n <span class="tooltip-icon" data-tooltip="Checks for numeric values, percentages, and currencies formatted according to locale rules."><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg></span>\n </div>\n <span class="panel-desc">Numeric, Currency &amp; Percentage localization</span>\n </div>\n <div class="graph"></div>\n </div>\n <div class="chart-panel datetime-quality">\n <div class="panel-header">\n <div class="panel-title-row">\n <span class="panel-title">DateTime Coverage</span>\n <span class="tooltip-icon" data-tooltip="Verification of date, time, and datetime patterns formatted according to locale conventions."><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg></span>\n </div>\n <span class="panel-desc">Date, Time &amp; Combined DateTime formats</span>\n </div>\n <div class="graph"></div>\n </div>\n </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="log-viewer-card card">\n <div class="log-toolbar">\n <div class="log-toolbar-left">\n <div class="log-heading">\n <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><line x1="10" y1="9" x2="8" y2="9"/></svg>\n <span>Execution Logs</span>\n </div>\n <div class="log-stat-badges">\n <span class="log-badge-stat stat-all" id="logStatTotal">Total: 0</span>\n <span class="log-badge-stat stat-info" id="logStatInfo">Info: 0</span>\n <span class="log-badge-stat stat-warn" id="logStatWarn">Warn: 0</span>\n <span class="log-badge-stat stat-error" id="logStatError">Error: 0</span>\n </div>\n </div>\n <div class="log-toolbar-right">\n <div class="log-level-pills" id="logLevelPills">\n <button type="button" class="log-level-btn active" data-level="ALL">All</button>\n <button type="button" class="log-level-btn" data-level="INFO">Info</button>\n <button type="button" class="log-level-btn" data-level="WARN">Warn</button>\n <button type="button" class="log-level-btn" data-level="ERROR">Error</button>\n </div>\n <div class="log-search-container">\n <svg class="search-svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>\n <input type="text" id="logSearchInput" class="log-search-field" placeholder="Search log lines..." />\n </div>\n <button class="log-tool-btn" id="wrapToggleBtn" type="button" title="Toggle line wrap">\n <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="15" y2="12"/><path d="M21 12h-4a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h4"/><line x1="3" y1="18" x2="17" y2="18"/></svg>\n <span>Wrap</span>\n </button>\n <button class="log-tool-btn 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-stream-wrapper" id="logStreamWrapper">\n <div class="log-lines" id="logLines"></div>\n </div>\n </div>\n </div>\n <div id="insights" class="content">\n <div class="insights-card card">\n <div class="insights-card-header">\n <div class="insights-header-left">\n <span class="title">Localization Quality Insights</span>\n <p class="insights-subtitle">Cross-locale comparison across verification metrics, localization status, and formatting health</p>\n </div>\n <div class="insights-header-right">\n <div class="insights-search-wrapper">\n <svg class="search-svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>\n <input type="text" id="insightsSearchInput" class="insights-search-field" placeholder="Filter metrics / rows..." />\n </div>\n </div>\n </div>\n <div class="insights-table-container">\n <table class="insights-table" id="insightsTable">\n <thead id="insightsTableHead"></thead>\n <tbody id="insightsTableBody"></tbody>\n </table>\n </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 <div id="screenshotGalleryModal" class="screenshot-gallery-modal" style="display:none;">\n <div class="gallery-modal-backdrop" onclick="closeScreenshotGallery()"></div>\n <div class="gallery-modal-dialog">\n <div class="gallery-modal-header">\n <div class="gallery-header-info">\n <span class="gallery-modal-title" id="galleryModalTitle">Screenshots</span>\n <span class="gallery-modal-badge" id="galleryModalBadge">0 items</span>\n </div>\n <button type="button" class="gallery-close-btn" onclick="closeScreenshotGallery()" title="Close (Esc)">&times;</button>\n </div>\n <div class="gallery-modal-body">\n <div class="gallery-preview-container">\n <div class="gallery-image-wrapper">\n <img id="galleryMainImg" src="" alt="Screenshot Preview" />\n <button type="button" class="gallery-nav-btn prev-btn" id="galleryPrevBtn" title="Previous (Left Arrow)">\n <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg>\n </button>\n <button type="button" class="gallery-nav-btn next-btn" id="galleryNextBtn" title="Next (Right Arrow)">\n <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg>\n </button>\n <button type="button" class="gallery-fullscreen-btn" id="galleryFullscreenBtn" title="Open Full View">\n <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></svg>\n <span>Full View</span>\n </button>\n </div>\n <div class="gallery-item-details" id="galleryItemDetails">\n <div class="gallery-meta-row">\n <span class="gallery-counter" id="galleryCounter">Item 1 of 1</span>\n <span class="gallery-page-badge" id="galleryPageBadge">Page: Main</span>\n </div>\n <div class="gallery-text-box">\n <span class="gallery-text-label">Used String / Value:</span>\n <span class="gallery-text-val" id="galleryTextVal">--</span>\n </div>\n </div>\n </div>\n <div class="gallery-thumbnails-strip" id="galleryThumbnailsStrip"></div>\n </div>\n </div>\n </div>\n</main>';
474
474
  }
475
475
  function getCssData() {
476
476
  return `:root {
@@ -487,7 +487,7 @@ function getCssData() {
487
487
  --warning: #f59e0b;
488
488
  --info: #0284c7;
489
489
  --purple: #8b5cf6;
490
- --radius: 8px;
490
+ --radius: 0.5rem;
491
491
  }
492
492
 
493
493
  [data-theme="dark"] {
@@ -520,20 +520,20 @@ html, body {
520
520
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
521
521
  background-color: var(--bg-body);
522
522
  color: var(--foreground);
523
- font-size: 14px;
523
+ font-size: 0.875rem;
524
524
  line-height: 1.5;
525
525
  -webkit-font-smoothing: antialiased;
526
526
  }
527
527
 
528
528
  /* Header */
529
529
  .report-header {
530
- height: 52px;
530
+ height: 3.25rem;
531
531
  background-color: var(--bg-card);
532
- border-bottom: 1px solid var(--border);
532
+ border-bottom: 0.0625rem solid var(--border);
533
533
  display: flex;
534
534
  align-items: center;
535
535
  justify-content: space-between;
536
- padding: 0 20px;
536
+ padding: 0 1.25rem;
537
537
  position: sticky;
538
538
  top: 0;
539
539
  z-index: 100;
@@ -542,105 +542,84 @@ html, body {
542
542
  .header-left {
543
543
  display: flex;
544
544
  align-items: center;
545
- gap: 12px;
546
- }
547
-
548
- .brand-badge {
549
- font-family: 'Outfit', sans-serif;
550
- font-weight: 700;
551
- font-size: 15px;
552
- letter-spacing: -0.3px;
553
- color: var(--foreground);
554
- }
555
-
556
- .brand-text .brand-ai {
557
- color: var(--accent);
558
- }
559
-
560
- .header-divider {
561
- width: 1px;
562
- height: 16px;
563
- background-color: var(--border);
564
- }
565
-
566
- .product-badge {
567
- display: inline-flex;
568
- align-items: center;
569
- gap: 5px;
570
- background-color: var(--muted-bg);
571
- color: var(--foreground);
572
- border: 1px solid var(--border);
573
- border-radius: 6px;
574
- padding: 2px 8px;
575
- font-size: 12px;
576
- font-weight: 500;
545
+ gap: 0.75rem;
577
546
  }
578
547
 
579
548
  .mode-pill {
580
549
  display: inline-flex;
581
550
  align-items: center;
582
- gap: 5px;
583
- border-radius: 6px;
584
- padding: 2px 8px;
585
- font-size: 12px;
551
+ gap: 0.42em;
552
+ border-radius: 0.5em;
553
+ padding: 0.17em 0.67em;
554
+ font-size: 0.75rem;
586
555
  font-weight: 500;
556
+ cursor: help;
587
557
  }
588
558
 
589
559
  .mode-pill .mode-dot {
590
- width: 6px;
591
- height: 6px;
560
+ width: 0.5em;
561
+ height: 0.5em;
592
562
  border-radius: 50%;
593
563
  }
594
564
 
595
565
  .mode-pill.mode-sanity {
596
566
  background-color: rgba(16, 185, 129, 0.1);
597
567
  color: #059669;
598
- border: 1px solid rgba(16, 185, 129, 0.2);
568
+ border: 0.0625rem solid rgba(16, 185, 129, 0.2);
599
569
  }
600
570
  .mode-pill.mode-sanity .mode-dot { background-color: #5B6EE1; }
601
571
 
602
572
  .mode-pill.mode-context {
603
573
  background-color: rgba(59, 130, 246, 0.1);
604
574
  color: #2563eb;
605
- border: 1px solid rgba(59, 130, 246, 0.2);
575
+ border: 0.0625rem solid rgba(59, 130, 246, 0.2);
606
576
  }
607
577
  .mode-pill.mode-context .mode-dot { background-color: #3b82f6; }
608
578
 
609
579
  .mode-pill.mode-i18n {
610
580
  background-color: rgba(234, 88, 12, 0.1);
611
581
  color: #ea580c;
612
- border: 1px solid rgba(234, 88, 12, 0.2);
582
+ border: 0.0625rem solid rgba(234, 88, 12, 0.2);
613
583
  }
614
584
  .mode-pill.mode-i18n .mode-dot { background-color: #ea580c; }
615
585
 
616
586
  .status-pill {
617
587
  display: inline-flex;
618
588
  align-items: center;
619
- gap: 4px;
620
- border-radius: 6px;
621
- padding: 2px 8px;
622
- font-size: 12px;
589
+ gap: 0.33em;
590
+ border-radius: 0.5em;
591
+ padding: 0.17em 0.67em;
592
+ font-size: 0.75rem;
623
593
  font-weight: 600;
594
+ cursor: help;
624
595
  }
625
596
 
626
597
  .status-pill.status-passed {
627
598
  background-color: rgba(16, 185, 129, 0.1);
628
599
  color: #059669;
629
- border: 1px solid rgba(16, 185, 129, 0.2);
600
+ border: 0.0625rem solid rgba(16, 185, 129, 0.2);
630
601
  }
631
602
 
632
603
  .status-pill.status-failed {
633
604
  background-color: rgba(239, 68, 68, 0.1);
634
605
  color: #dc2626;
635
- border: 1px solid rgba(239, 68, 68, 0.2);
606
+ border: 0.0625rem solid rgba(239, 68, 68, 0.2);
607
+ }
608
+
609
+ .pill-prefix {
610
+ font-size: 0.6875rem;
611
+ font-weight: 600;
612
+ opacity: 0.75;
613
+ text-transform: uppercase;
614
+ letter-spacing: 0.0187rem;
636
615
  }
637
616
 
638
617
  .timestamp-badge {
639
618
  display: inline-flex;
640
619
  align-items: center;
641
- gap: 5px;
620
+ gap: 0.3125rem;
642
621
  color: var(--text-muted);
643
- font-size: 12px;
622
+ font-size: 0.75rem;
644
623
  }
645
624
 
646
625
  /* Navigation Tabs (Minimalist client_v2 style) */
@@ -651,11 +630,11 @@ html, body {
651
630
 
652
631
  .tabs-list {
653
632
  background-color: var(--muted-bg);
654
- border-radius: 8px;
655
- padding: 3px;
633
+ border-radius: 0.5rem;
634
+ padding: 0.1875rem;
656
635
  display: inline-flex;
657
636
  align-items: center;
658
- gap: 2px;
637
+ gap: 0.125rem;
659
638
  list-style: none;
660
639
  margin: 0;
661
640
  }
@@ -664,15 +643,15 @@ html, body {
664
643
  border: none;
665
644
  background: transparent;
666
645
  color: var(--text-muted);
667
- font-size: 13px;
646
+ font-size: 0.8125rem;
668
647
  font-weight: 500;
669
- padding: 5px 12px;
670
- border-radius: 6px;
648
+ padding: 0.38em 0.92em;
649
+ border-radius: 0.46em;
671
650
  cursor: pointer;
672
651
  transition: all 0.15s ease;
673
652
  display: inline-flex;
674
653
  align-items: center;
675
- gap: 6px;
654
+ gap: 0.46em;
676
655
  font-family: inherit;
677
656
  outline: none;
678
657
  }
@@ -689,7 +668,7 @@ html, body {
689
668
  background-color: var(--bg-card);
690
669
  color: var(--foreground);
691
670
  font-weight: 600;
692
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
671
+ box-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.06);
693
672
  }
694
673
 
695
674
  .tab-dropdown {
@@ -707,14 +686,14 @@ html, body {
707
686
 
708
687
  .tabs-list .submenu {
709
688
  position: absolute;
710
- top: calc(100% + 4px);
689
+ top: calc(100% + 0.25rem);
711
690
  right: 0;
712
691
  background-color: var(--bg-card);
713
- border: 1px solid var(--border);
714
- border-radius: 8px;
715
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
716
- min-width: 140px;
717
- padding: 4px;
692
+ border: 0.0625rem solid var(--border);
693
+ border-radius: 0.5rem;
694
+ box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
695
+ min-width: 8.75rem;
696
+ padding: 0.25rem;
718
697
  display: none;
719
698
  z-index: 1000;
720
699
  list-style: none;
@@ -732,11 +711,11 @@ html, body {
732
711
 
733
712
  .sub-menu-item a {
734
713
  display: block;
735
- padding: 6px 12px;
736
- font-size: 13px;
714
+ padding: 0.46em 0.92em;
715
+ font-size: 0.8125rem;
737
716
  color: var(--foreground);
738
717
  text-decoration: none;
739
- border-radius: 5px;
718
+ border-radius: 0.38em;
740
719
  font-family: inherit;
741
720
  transition: background 0.15s;
742
721
  }
@@ -748,18 +727,18 @@ html, body {
748
727
  /* Main Content Layout (Full Width) */
749
728
  .report-main {
750
729
  width: 100%;
751
- height: calc(100% - 52px);
730
+ height: calc(100% - 3.25rem);
752
731
  overflow-y: auto;
753
732
  }
754
733
 
755
734
  .content-wrapper {
756
735
  width: 100%;
757
736
  min-height: 100%;
758
- padding: 20px;
737
+ padding: 1.25rem;
759
738
  }
760
739
 
761
740
  .container {
762
- max-width: 1360px;
741
+ max-width: 90rem;
763
742
  margin: 0 auto;
764
743
  }
765
744
 
@@ -774,53 +753,53 @@ html, body {
774
753
  /* Cards */
775
754
  .card {
776
755
  background-color: var(--bg-card);
777
- border: 1px solid var(--border);
756
+ border: 0.0625rem solid var(--border);
778
757
  border-radius: var(--radius);
779
- padding: 20px;
780
- margin-bottom: 20px;
758
+ padding: 1.25rem;
759
+ margin-bottom: 1.25rem;
781
760
  }
782
761
 
783
762
  .card > .title {
784
- font-size: 15px;
763
+ font-size: 0.9375rem;
785
764
  font-weight: 600;
786
765
  color: var(--foreground);
787
- margin-bottom: 14px;
766
+ margin-bottom: 0.875rem;
788
767
  display: block;
789
768
  }
790
769
 
791
770
  /* Common Info / Sanity Details Card */
792
771
  .common-info.card {
793
- border-left: 3px solid var(--accent);
772
+ border-left: 0.1875rem solid var(--accent);
794
773
  }
795
774
 
796
775
  .common-info .title {
797
- font-size: 15px;
776
+ font-size: 0.9375rem;
798
777
  font-weight: 600;
799
778
  color: var(--foreground);
800
- margin-bottom: 8px;
779
+ margin-bottom: 0.5rem;
801
780
  display: block;
802
781
  }
803
782
 
804
783
  .common-info .info {
805
- font-size: 13.5px;
784
+ font-size: 0.8438rem;
806
785
  color: var(--text-muted);
807
786
  line-height: 1.6;
808
787
  margin: 0;
809
788
  }
810
789
 
811
790
  .btn-view-log {
812
- margin-top: 14px;
791
+ margin-top: 0.875rem;
813
792
  background-color: var(--accent);
814
793
  color: #ffffff;
815
794
  border: none;
816
- padding: 6px 14px;
817
- border-radius: 6px;
818
- font-size: 13px;
795
+ padding: 0.46em 1.08em;
796
+ border-radius: 0.46em;
797
+ font-size: 0.8125rem;
819
798
  font-weight: 500;
820
799
  cursor: pointer;
821
800
  display: inline-flex;
822
801
  align-items: center;
823
- gap: 6px;
802
+ gap: 0.46em;
824
803
  font-family: inherit;
825
804
  transition: opacity 0.15s;
826
805
  }
@@ -832,7 +811,7 @@ html, body {
832
811
  /* Overall Quality Section */
833
812
  .overall-quality .section {
834
813
  display: flex;
835
- gap: 24px;
814
+ gap: 1.5rem;
836
815
  align-items: flex-start;
837
816
  }
838
817
 
@@ -841,15 +820,15 @@ html, body {
841
820
  }
842
821
 
843
822
  .overall-quality .block:last-child {
844
- width: 520px;
845
- min-width: 480px;
823
+ width: 32.5rem;
824
+ min-width: 30rem;
846
825
  }
847
826
 
848
827
  .overall-quality .desc {
849
- font-size: 13.5px;
828
+ font-size: 0.8438rem;
850
829
  color: var(--text-muted);
851
830
  line-height: 1.6;
852
- margin: 0 0 16px 0;
831
+ margin: 0 0 1rem 0;
853
832
  }
854
833
 
855
834
  .overall-quality .items {
@@ -858,63 +837,63 @@ html, body {
858
837
  margin: 0;
859
838
  display: grid;
860
839
  grid-template-columns: 1fr 1fr;
861
- gap: 12px;
840
+ gap: 0.75rem;
862
841
  }
863
842
 
864
843
  .overall-quality .items li {
865
844
  background-color: var(--muted-bg);
866
- padding: 12px;
867
- border-radius: 6px;
868
- border: 1px solid var(--border);
845
+ padding: 0.75rem;
846
+ border-radius: 0.375rem;
847
+ border: 0.0625rem solid var(--border);
869
848
  }
870
849
 
871
850
  .overall-quality .items li h4 {
872
- margin: 0 0 4px 0;
873
- font-size: 13px;
851
+ margin: 0 0 0.25rem 0;
852
+ font-size: 0.8125rem;
874
853
  font-weight: 600;
875
854
  color: var(--foreground);
876
855
  }
877
856
 
878
857
  .overall-quality .items li p.detail {
879
858
  margin: 0;
880
- font-size: 12px;
859
+ font-size: 0.75rem;
881
860
  color: var(--text-muted);
882
861
  line-height: 1.4;
883
862
  }
884
863
 
885
864
  /* Graphs grid */
886
865
  .string-quality, .skipped-items, .number-quality, .datetime-quality, .format-quality {
887
- margin-bottom: 20px;
866
+ margin-bottom: 1.25rem;
888
867
  }
889
868
 
890
869
  /* Status Bars */
891
870
  .status-bar {
892
- margin-bottom: 16px;
871
+ margin-bottom: 1rem;
893
872
  }
894
873
 
895
874
  .bar-container {
896
- margin-bottom: 10px;
875
+ margin-bottom: 0.625rem;
897
876
  }
898
877
 
899
878
  .bar-container .name {
900
- font-size: 12px;
879
+ font-size: 0.75rem;
901
880
  font-weight: 500;
902
881
  color: var(--text-muted);
903
- margin-bottom: 4px;
882
+ margin-bottom: 0.25rem;
904
883
  }
905
884
 
906
885
  .bar-holder {
907
886
  background-color: var(--muted-bg);
908
- height: 8px;
909
- border-radius: 4px;
887
+ height: 0.5rem;
888
+ border-radius: 0.25rem;
910
889
  overflow: hidden;
911
890
  position: relative;
912
891
  }
913
892
 
914
893
  .bar {
915
894
  height: 100%;
916
- border-radius: 4px;
917
- text-indent: -9999px;
895
+ border-radius: 0.25rem;
896
+ text-indent: -624.9375rem;
918
897
  transition: width 0.3s ease;
919
898
  }
920
899
 
@@ -925,10 +904,10 @@ html, body {
925
904
 
926
905
  /* Stat Summary Table */
927
906
  .stat .name {
928
- font-size: 13px;
907
+ font-size: 0.8125rem;
929
908
  font-weight: 600;
930
909
  color: var(--foreground);
931
- margin: 14px 0 8px 0;
910
+ margin: 0.875rem 0 0.5rem 0;
932
911
  }
933
912
 
934
913
  .stat table {
@@ -937,12 +916,12 @@ html, body {
937
916
  }
938
917
 
939
918
  .stat tr {
940
- border-bottom: 1px solid var(--border);
919
+ border-bottom: 0.0625rem solid var(--border);
941
920
  }
942
921
 
943
922
  .stat td {
944
- padding: 6px 0;
945
- font-size: 12.5px;
923
+ padding: 0.375rem 0;
924
+ font-size: 0.7813rem;
946
925
  }
947
926
 
948
927
  .stat td.name {
@@ -959,8 +938,8 @@ html, body {
959
938
  /* Insights Cards Holder */
960
939
  #insights .cards .holder {
961
940
  display: grid;
962
- grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
963
- gap: 20px;
941
+ grid-template-columns: repeat(auto-fill, minmax(22.5rem, 1fr));
942
+ gap: 1.25rem;
964
943
  }
965
944
 
966
945
  #insights .card[data-locale] {
@@ -970,29 +949,29 @@ html, body {
970
949
 
971
950
  #insights .card[data-locale]:hover {
972
951
  border-color: var(--accent);
973
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
952
+ box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);
974
953
  }
975
954
 
976
955
  /* Locale Table Header */
977
956
  .locale-header-bar {
978
957
  display: flex;
979
958
  align-items: center;
980
- gap: 12px;
981
- margin-bottom: 16px;
959
+ gap: 0.75rem;
960
+ margin-bottom: 1rem;
982
961
  }
983
962
 
984
963
  .back-to-insights-btn {
985
964
  background-color: var(--muted-bg);
986
- border: 1px solid var(--border);
965
+ border: 0.0625rem solid var(--border);
987
966
  color: var(--foreground);
988
- border-radius: 6px;
989
- padding: 5px 12px;
990
- font-size: 12.5px;
967
+ border-radius: 0.375rem;
968
+ padding: 0.3125rem 0.75rem;
969
+ font-size: 0.7813rem;
991
970
  font-weight: 500;
992
971
  cursor: pointer;
993
972
  display: inline-flex;
994
973
  align-items: center;
995
- gap: 6px;
974
+ gap: 0.375rem;
996
975
  font-family: inherit;
997
976
  transition: background 0.15s;
998
977
  }
@@ -1002,7 +981,7 @@ html, body {
1002
981
  }
1003
982
 
1004
983
  .locale-header-bar .title {
1005
- font-size: 16px;
984
+ font-size: 1rem;
1006
985
  font-weight: 600;
1007
986
  color: var(--foreground);
1008
987
  }
@@ -1010,17 +989,17 @@ html, body {
1010
989
  /* DataTables Styling */
1011
990
  .coverage-info {
1012
991
  background-color: var(--bg-card);
1013
- border: 1px solid var(--border);
992
+ border: 0.0625rem solid var(--border);
1014
993
  border-radius: var(--radius);
1015
- padding: 16px;
994
+ padding: 1rem;
1016
995
  }
1017
996
 
1018
997
  table.dataTable {
1019
998
  border-collapse: separate !important;
1020
999
  border-spacing: 0;
1021
1000
  width: 100% !important;
1022
- border: 1px solid var(--border) !important;
1023
- border-radius: 6px;
1001
+ border: 0.0625rem solid var(--border) !important;
1002
+ border-radius: 0.375rem;
1024
1003
  overflow: hidden;
1025
1004
  background-color: var(--bg-card);
1026
1005
  }
@@ -1028,18 +1007,18 @@ table.dataTable {
1028
1007
  table.dataTable thead th {
1029
1008
  background-color: var(--muted-bg) !important;
1030
1009
  color: var(--foreground) !important;
1031
- font-size: 12.5px !important;
1010
+ font-size: 0.7813rem !important;
1032
1011
  font-weight: 600 !important;
1033
- border-bottom: 1px solid var(--border) !important;
1034
- padding: 10px 12px !important;
1012
+ border-bottom: 0.0625rem solid var(--border) !important;
1013
+ padding: 0.625rem 0.75rem !important;
1035
1014
  text-align: left;
1036
1015
  }
1037
1016
 
1038
1017
  table.dataTable tbody td {
1039
- padding: 10px 12px !important;
1040
- font-size: 13px !important;
1018
+ padding: 0.625rem 0.75rem !important;
1019
+ font-size: 0.8125rem !important;
1041
1020
  color: var(--foreground) !important;
1042
- border-bottom: 1px solid var(--border) !important;
1021
+ border-bottom: 0.0625rem solid var(--border) !important;
1043
1022
  }
1044
1023
 
1045
1024
  table.dataTable tbody tr:last-child td {
@@ -1053,11 +1032,11 @@ table.dataTable tbody tr:hover td {
1053
1032
  select.filter.dt-input {
1054
1033
  display: block;
1055
1034
  width: 100%;
1056
- margin-top: 5px;
1057
- padding: 3px 6px;
1058
- font-size: 11.5px;
1059
- border: 1px solid var(--border);
1060
- border-radius: 4px;
1035
+ margin-top: 0.3125rem;
1036
+ padding: 0.26em 0.52em;
1037
+ font-size: 0.7188rem;
1038
+ border: 0.0625rem solid var(--border);
1039
+ border-radius: 0.35em;
1061
1040
  background-color: var(--bg-card);
1062
1041
  color: var(--foreground);
1063
1042
  font-family: inherit;
@@ -1066,16 +1045,16 @@ select.filter.dt-input {
1066
1045
 
1067
1046
  .reset-filters-btn {
1068
1047
  background-color: var(--muted-bg);
1069
- border: 1px solid var(--border);
1048
+ border: 0.0625rem solid var(--border);
1070
1049
  color: var(--foreground);
1071
- border-radius: 6px;
1072
- padding: 4px 10px;
1073
- font-size: 12px;
1050
+ border-radius: 0.5em;
1051
+ padding: 0.33em 0.83em;
1052
+ font-size: 0.75rem;
1074
1053
  font-weight: 500;
1075
1054
  cursor: pointer;
1076
1055
  font-family: inherit;
1077
1056
  transition: background 0.15s;
1078
- margin-left: 12px;
1057
+ margin-left: 0.75rem;
1079
1058
  }
1080
1059
 
1081
1060
  .reset-filters-btn:hover {
@@ -1084,18 +1063,18 @@ select.filter.dt-input {
1084
1063
 
1085
1064
  .view-screenshot-btn {
1086
1065
  background-color: var(--muted-bg);
1087
- border: 1px solid var(--border);
1066
+ border: 0.0625rem solid var(--border);
1088
1067
  color: var(--foreground);
1089
- border-radius: 6px;
1090
- padding: 4px 10px;
1091
- font-size: 12px;
1068
+ border-radius: 0.5em;
1069
+ padding: 0.33em 0.83em;
1070
+ font-size: 0.75rem;
1092
1071
  font-weight: 500;
1093
1072
  cursor: pointer;
1094
1073
  text-decoration: none;
1095
1074
  display: inline-flex;
1096
1075
  align-items: center;
1097
1076
  justify-content: center;
1098
- gap: 6px;
1077
+ gap: 0.375rem;
1099
1078
  font-family: inherit;
1100
1079
  transition: all 0.15s ease;
1101
1080
  line-height: 1;
@@ -1120,6 +1099,14 @@ select.filter.dt-input {
1120
1099
  width: 100vw;
1121
1100
  height: 100vh;
1122
1101
  z-index: 99999;
1102
+ user-select: none;
1103
+ -webkit-user-select: none;
1104
+ -webkit-tap-highlight-color: transparent;
1105
+ outline: none;
1106
+ }
1107
+
1108
+ .image-viewer *::selection {
1109
+ background: transparent;
1123
1110
  }
1124
1111
 
1125
1112
  .image-viewer-backdrop {
@@ -1129,7 +1116,7 @@ select.filter.dt-input {
1129
1116
  width: 100%;
1130
1117
  height: 100%;
1131
1118
  background: rgba(0, 0, 0, 0.75);
1132
- backdrop-filter: blur(4px);
1119
+ backdrop-filter: blur(0.25rem);
1133
1120
  cursor: pointer;
1134
1121
  }
1135
1122
 
@@ -1139,9 +1126,9 @@ select.filter.dt-input {
1139
1126
  left: 50%;
1140
1127
  transform: translate(-50%, -50%);
1141
1128
  background-color: var(--bg-card);
1142
- border: 1px solid var(--border);
1143
- border-radius: 10px;
1144
- box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
1129
+ border: 0.0625rem solid var(--border);
1130
+ border-radius: 0.625rem;
1131
+ box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.5);
1145
1132
  width: 95vw;
1146
1133
  height: 92vh;
1147
1134
  max-width: 96vw;
@@ -1156,28 +1143,28 @@ select.filter.dt-input {
1156
1143
  display: flex;
1157
1144
  justify-content: space-between;
1158
1145
  align-items: center;
1159
- padding: 8px 16px;
1160
- border-bottom: 1px solid var(--border);
1146
+ padding: 0.5rem 1rem;
1147
+ border-bottom: 0.0625rem solid var(--border);
1161
1148
  background-color: var(--bg-card);
1162
1149
  flex-shrink: 0;
1163
1150
  }
1164
1151
 
1165
1152
  .image-viewer-title {
1166
- font-size: 14px;
1153
+ font-size: 0.875rem;
1167
1154
  font-weight: 600;
1168
1155
  color: var(--foreground);
1169
1156
  }
1170
1157
 
1171
1158
  .close-button {
1172
1159
  background: var(--muted-bg);
1173
- border: 1px solid var(--border);
1174
- border-radius: 6px;
1175
- width: 30px;
1176
- height: 30px;
1160
+ border: 0.0625rem solid var(--border);
1161
+ border-radius: 0.3em;
1162
+ width: 1.5em;
1163
+ height: 1.5em;
1177
1164
  display: inline-flex;
1178
1165
  align-items: center;
1179
1166
  justify-content: center;
1180
- font-size: 20px;
1167
+ font-size: 1.25rem;
1181
1168
  cursor: pointer;
1182
1169
  color: var(--foreground);
1183
1170
  line-height: 1;
@@ -1192,7 +1179,7 @@ select.filter.dt-input {
1192
1179
 
1193
1180
  .image-viewer-body {
1194
1181
  flex: 1;
1195
- padding: 10px;
1182
+ padding: 0.625rem;
1196
1183
  overflow: auto;
1197
1184
  background-color: #0b0f19;
1198
1185
  display: flex;
@@ -1204,35 +1191,35 @@ select.filter.dt-input {
1204
1191
  max-width: 100%;
1205
1192
  height: auto;
1206
1193
  object-fit: contain;
1207
- border-radius: 4px;
1208
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
1194
+ border-radius: 0.25rem;
1195
+ box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.5);
1209
1196
  }
1210
1197
 
1211
1198
  /* Context Pages & Modal Viewer Styles (Theme-compatible) */
1212
1199
  #overview .common-info {
1213
1200
  background-color: var(--bg-card);
1214
- border: 1px solid var(--border);
1215
- border-radius: 8px;
1216
- padding: 20px;
1217
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
1218
- margin-bottom: 20px;
1201
+ border: 0.0625rem solid var(--border);
1202
+ border-radius: 0.5rem;
1203
+ padding: 1.25rem;
1204
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05);
1205
+ margin-bottom: 1.25rem;
1219
1206
  display: flex;
1220
1207
  flex-direction: column;
1221
1208
  }
1222
1209
 
1223
1210
  #overview .common-info .title {
1224
- font-size: 16px;
1211
+ font-size: 1rem;
1225
1212
  font-weight: 700;
1226
1213
  color: var(--foreground);
1227
- margin-bottom: 6px;
1214
+ margin-bottom: 0.375rem;
1228
1215
  display: block;
1229
1216
  }
1230
1217
 
1231
1218
  #overview .common-info .info {
1232
- font-size: 13.5px;
1219
+ font-size: 0.8438rem;
1233
1220
  color: var(--text-muted);
1234
1221
  line-height: 1.6;
1235
- margin: 0 0 16px 0;
1222
+ margin: 0 0 1rem 0;
1236
1223
  }
1237
1224
 
1238
1225
  #overview .common-info .info strong {
@@ -1248,8 +1235,8 @@ select.filter.dt-input {
1248
1235
  display: flex;
1249
1236
  flex-direction: column;
1250
1237
  width: 100%;
1251
- padding-top: 14px;
1252
- border-top: 1px solid var(--border);
1238
+ padding-top: 0.875rem;
1239
+ border-top: 0.0625rem solid var(--border);
1253
1240
  }
1254
1241
 
1255
1242
  .page-tiles .title-section {
@@ -1258,17 +1245,17 @@ select.filter.dt-input {
1258
1245
  align-items: center;
1259
1246
  justify-content: space-between;
1260
1247
  flex-wrap: wrap;
1261
- gap: 14px;
1262
- margin-bottom: 18px;
1248
+ gap: 0.875rem;
1249
+ margin-bottom: 1.125rem;
1263
1250
  }
1264
1251
 
1265
1252
  .page-tiles .title-section .title-wrapper {
1266
1253
  flex: 1;
1267
- min-width: 140px;
1254
+ min-width: 8.75rem;
1268
1255
  }
1269
1256
 
1270
1257
  .page-tiles .title-section .title-wrapper .title {
1271
- font-size: 15px;
1258
+ font-size: 0.9375rem;
1272
1259
  font-weight: 700;
1273
1260
  color: var(--foreground);
1274
1261
  }
@@ -1276,8 +1263,8 @@ select.filter.dt-input {
1276
1263
  .page-tiles .title-section .search-field-wrapper {
1277
1264
  display: flex;
1278
1265
  align-items: center;
1279
- gap: 8px;
1280
- font-size: 13px;
1266
+ gap: 0.5rem;
1267
+ font-size: 0.8125rem;
1281
1268
  color: var(--text-muted);
1282
1269
  }
1283
1270
 
@@ -1288,24 +1275,24 @@ select.filter.dt-input {
1288
1275
  }
1289
1276
 
1290
1277
  .page-tiles .title-section .search-field-wrapper #operator-filter {
1291
- padding: 5px 10px;
1292
- border: 1px solid var(--border);
1293
- border-radius: 6px;
1278
+ padding: 0.3125rem 0.625rem;
1279
+ border: 0.0625rem solid var(--border);
1280
+ border-radius: 0.375rem;
1294
1281
  background-color: var(--bg-card);
1295
1282
  color: var(--foreground);
1296
- font-size: 13px;
1283
+ font-size: 0.8125rem;
1297
1284
  outline: none;
1298
1285
  cursor: pointer;
1299
1286
  }
1300
1287
 
1301
1288
  .page-tiles .title-section .search-field-wrapper #search-input {
1302
- padding: 5px 10px;
1303
- border: 1px solid var(--border);
1304
- border-radius: 6px;
1289
+ padding: 0.38em 0.77em;
1290
+ border: 0.0625rem solid var(--border);
1291
+ border-radius: 0.46em;
1305
1292
  background-color: var(--bg-card);
1306
1293
  color: var(--foreground);
1307
- font-size: 13px;
1308
- width: 220px;
1294
+ font-size: 0.8125rem;
1295
+ width: 13.75rem;
1309
1296
  outline: none;
1310
1297
  }
1311
1298
 
@@ -1318,8 +1305,8 @@ select.filter.dt-input {
1318
1305
  .page-tiles .title-section .locale-filter-wrapper {
1319
1306
  display: flex;
1320
1307
  align-items: center;
1321
- gap: 8px;
1322
- font-size: 13px;
1308
+ gap: 0.5rem;
1309
+ font-size: 0.8125rem;
1323
1310
  color: var(--text-muted);
1324
1311
  }
1325
1312
 
@@ -1330,12 +1317,12 @@ select.filter.dt-input {
1330
1317
  }
1331
1318
 
1332
1319
  .page-tiles .title-section .locale-filter-wrapper #locale-filter {
1333
- padding: 5px 10px;
1334
- border: 1px solid var(--border);
1335
- border-radius: 6px;
1320
+ padding: 0.3125rem 0.625rem;
1321
+ border: 0.0625rem solid var(--border);
1322
+ border-radius: 0.375rem;
1336
1323
  background-color: var(--bg-card);
1337
1324
  color: var(--foreground);
1338
- font-size: 13px;
1325
+ font-size: 0.8125rem;
1339
1326
  outline: none;
1340
1327
  cursor: pointer;
1341
1328
  }
@@ -1343,22 +1330,22 @@ select.filter.dt-input {
1343
1330
  .page-tiles .tiles-list-wrapper {
1344
1331
  width: 100%;
1345
1332
  overflow-y: auto;
1346
- padding: 4px 0 20px 0;
1333
+ padding: 0.25rem 0 1.25rem 0;
1347
1334
  }
1348
1335
 
1349
1336
  .page-tiles .tiles-list {
1350
1337
  display: grid;
1351
- grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
1352
- gap: 16px;
1338
+ grid-template-columns: repeat(auto-fill, minmax(13.75rem, 1fr));
1339
+ gap: 1rem;
1353
1340
  width: 100%;
1354
1341
  }
1355
1342
 
1356
1343
  .page-tiles .tiles-list .empty-context {
1357
1344
  grid-column: 1 / -1;
1358
1345
  text-align: center;
1359
- padding: 40px 20px;
1346
+ padding: 2.5rem 1.25rem;
1360
1347
  color: var(--text-muted);
1361
- font-size: 14px;
1348
+ font-size: 0.875rem;
1362
1349
  font-weight: 500;
1363
1350
  }
1364
1351
 
@@ -1366,47 +1353,63 @@ select.filter.dt-input {
1366
1353
  display: flex;
1367
1354
  flex-direction: column;
1368
1355
  background-color: var(--bg-card);
1369
- border: 1px solid var(--border);
1370
- border-radius: 8px;
1356
+ border: 0.0625rem solid var(--border);
1357
+ border-radius: 0.5rem;
1371
1358
  overflow: hidden;
1372
1359
  cursor: pointer;
1373
1360
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
1374
- height: 190px;
1375
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
1361
+ height: 11.875rem;
1362
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05);
1363
+ user-select: none;
1364
+ -webkit-user-select: none;
1365
+ -webkit-tap-highlight-color: transparent;
1366
+ outline: none;
1367
+ }
1368
+
1369
+ .page-tiles .tiles-list .tile-container *::selection {
1370
+ background: transparent;
1376
1371
  }
1377
1372
 
1378
1373
  .page-tiles .tiles-list .tile-container:hover {
1379
1374
  border-color: var(--accent);
1380
- transform: translateY(-2px);
1381
- box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
1375
+ transform: translateY(-0.125rem);
1376
+ box-shadow: 0 0.375rem 1rem rgba(0, 0, 0, 0.08);
1382
1377
  }
1383
1378
 
1384
1379
  .page-tiles .tiles-list .tile-container .image {
1385
1380
  width: 100%;
1386
- height: 148px;
1381
+ height: 9.25rem;
1387
1382
  object-fit: cover;
1388
1383
  background-color: rgba(100, 116, 139, 0.08);
1389
1384
  display: block;
1385
+ user-select: none;
1386
+ -webkit-user-select: none;
1387
+ -webkit-user-drag: none;
1388
+ pointer-events: none;
1390
1389
  }
1391
1390
 
1392
1391
  .page-tiles .tiles-list .tile-container .name {
1393
1392
  display: flex;
1394
- height: 42px;
1395
- border-top: 1px solid var(--border);
1393
+ height: 2.625rem;
1394
+ border-top: 0.0625rem solid var(--border);
1396
1395
  align-items: center;
1397
- padding: 0 10px;
1396
+ padding: 0 0.625rem;
1398
1397
  background-color: var(--bg-card);
1399
1398
  box-sizing: border-box;
1399
+ user-select: none;
1400
+ -webkit-user-select: none;
1400
1401
  }
1401
1402
 
1402
1403
  .page-tiles .tiles-list .tile-container .name span {
1403
1404
  white-space: nowrap;
1404
1405
  overflow: hidden;
1405
1406
  text-overflow: ellipsis;
1406
- font-size: 12px;
1407
+ font-size: 0.75rem;
1407
1408
  font-weight: 600;
1408
1409
  color: var(--foreground);
1409
- letter-spacing: 0.2px;
1410
+ letter-spacing: 0.0125rem;
1411
+ user-select: none;
1412
+ -webkit-user-select: none;
1410
1413
  }
1411
1414
 
1412
1415
  /* Modal Context Image Viewer */
@@ -1420,16 +1423,23 @@ body .context-image-viewer {
1420
1423
  left: 0;
1421
1424
  background: rgba(0, 0, 0, 0.82);
1422
1425
  position: fixed;
1423
- backdrop-filter: blur(4px);
1426
+ backdrop-filter: blur(0.25rem);
1424
1427
  box-sizing: border-box;
1428
+ user-select: none;
1429
+ -webkit-user-select: none;
1430
+ -webkit-tap-highlight-color: transparent;
1431
+ }
1432
+
1433
+ body .context-image-viewer *::selection {
1434
+ background: transparent;
1425
1435
  }
1426
1436
 
1427
1437
  body .context-image-viewer .close-btn {
1428
1438
  position: absolute;
1429
- right: 20px;
1430
- top: 14px;
1439
+ right: 1.25rem;
1440
+ top: 0.875rem;
1431
1441
  color: #cbd5e1;
1432
- font-size: 34px;
1442
+ font-size: 2.125rem;
1433
1443
  line-height: 1;
1434
1444
  cursor: pointer;
1435
1445
  z-index: 100000;
@@ -1453,7 +1463,7 @@ body .context-image-viewer .loader {
1453
1463
  display: flex;
1454
1464
  align-items: center;
1455
1465
  justify-content: center;
1456
- font-size: 16px;
1466
+ font-size: 1rem;
1457
1467
  font-weight: 600;
1458
1468
  background: rgba(0, 0, 0, 0.5);
1459
1469
  }
@@ -1465,11 +1475,14 @@ body .context-image-viewer .viewer {
1465
1475
  color: var(--foreground, #0f172a);
1466
1476
  margin: auto;
1467
1477
  position: relative;
1468
- border-radius: 12px;
1478
+ border-radius: 0.75rem;
1469
1479
  overflow: hidden;
1470
- box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
1480
+ box-shadow: 0 1.5625rem 3.125rem -0.75rem rgba(0, 0, 0, 0.5);
1471
1481
  display: flex;
1472
1482
  flex-direction: column;
1483
+ user-select: none;
1484
+ -webkit-user-select: none;
1485
+ outline: none;
1473
1486
  }
1474
1487
 
1475
1488
  body .context-image-viewer .viewer .wrapper {
@@ -1482,8 +1495,8 @@ body .context-image-viewer .viewer .wrapper {
1482
1495
 
1483
1496
  body .context-image-viewer .viewer .prev-btn,
1484
1497
  body .context-image-viewer .viewer .next-btn {
1485
- width: 44px;
1486
- height: 44px;
1498
+ width: 2.75rem;
1499
+ height: 2.75rem;
1487
1500
  border-radius: 50%;
1488
1501
  display: flex;
1489
1502
  align-items: center;
@@ -1499,8 +1512,8 @@ body .context-image-viewer .viewer .next-btn {
1499
1512
  user-select: none;
1500
1513
  }
1501
1514
 
1502
- body .context-image-viewer .viewer .prev-btn { left: 16px; }
1503
- body .context-image-viewer .viewer .next-btn { right: 16px; }
1515
+ body .context-image-viewer .viewer .prev-btn { left: 1rem; }
1516
+ body .context-image-viewer .viewer .next-btn { right: 1rem; }
1504
1517
 
1505
1518
  body .context-image-viewer .viewer .prev-btn:hover,
1506
1519
  body .context-image-viewer .viewer .next-btn:hover {
@@ -1510,7 +1523,7 @@ body .context-image-viewer .viewer .next-btn:hover {
1510
1523
 
1511
1524
  body .context-image-viewer .viewer .prev-btn span,
1512
1525
  body .context-image-viewer .viewer .next-btn span {
1513
- font-size: 22px;
1526
+ font-size: 1.375rem;
1514
1527
  font-weight: 300;
1515
1528
  line-height: 1;
1516
1529
  }
@@ -1518,9 +1531,9 @@ body .context-image-viewer .viewer .next-btn span {
1518
1531
  body .context-image-viewer .viewer .zoom-in-btn,
1519
1532
  body .context-image-viewer .viewer .zoom-out-btn {
1520
1533
  position: absolute;
1521
- bottom: 20px;
1522
- width: 38px;
1523
- height: 38px;
1534
+ bottom: 1.25rem;
1535
+ width: 2.375rem;
1536
+ height: 2.375rem;
1524
1537
  border-radius: 50%;
1525
1538
  display: flex;
1526
1539
  align-items: center;
@@ -1533,8 +1546,8 @@ body .context-image-viewer .viewer .zoom-out-btn {
1533
1546
  user-select: none;
1534
1547
  }
1535
1548
 
1536
- body .context-image-viewer .viewer .zoom-out-btn { left: calc(50% - 46px); }
1537
- body .context-image-viewer .viewer .zoom-in-btn { left: calc(50% + 8px); }
1549
+ body .context-image-viewer .viewer .zoom-out-btn { left: calc(50% - 2.875rem); }
1550
+ body .context-image-viewer .viewer .zoom-in-btn { left: calc(50% + 0.5rem); }
1538
1551
 
1539
1552
  body .context-image-viewer .viewer .zoom-in-btn:hover,
1540
1553
  body .context-image-viewer .viewer .zoom-out-btn:hover {
@@ -1544,44 +1557,44 @@ body .context-image-viewer .viewer .zoom-out-btn:hover {
1544
1557
 
1545
1558
  body .context-image-viewer .viewer .zoom-in-btn span,
1546
1559
  body .context-image-viewer .viewer .zoom-out-btn span {
1547
- font-size: 20px;
1560
+ font-size: 1.25rem;
1548
1561
  font-weight: 400;
1549
1562
  line-height: 1;
1550
1563
  }
1551
1564
 
1552
1565
  body .context-image-viewer .viewer .wrapper .toolbar {
1553
- border-bottom: 1px solid var(--border);
1566
+ border-bottom: 0.0625rem solid var(--border);
1554
1567
  background-color: var(--bg-card);
1555
- height: 52px;
1556
- padding: 0 20px;
1568
+ height: 3.25rem;
1569
+ padding: 0 1.25rem;
1557
1570
  display: flex;
1558
1571
  flex-direction: row;
1559
1572
  align-items: center;
1560
1573
  justify-content: space-between;
1561
1574
  flex-shrink: 0;
1562
- gap: 16px;
1575
+ gap: 1rem;
1563
1576
  }
1564
1577
 
1565
1578
  body .context-image-viewer .viewer .wrapper .toolbar .page-title-wrapper {
1566
1579
  display: flex;
1567
1580
  align-items: center;
1568
- gap: 10px;
1581
+ gap: 0.625rem;
1569
1582
  overflow: hidden;
1570
1583
  flex: 1;
1571
1584
  }
1572
1585
 
1573
1586
  body .context-image-viewer .viewer .wrapper .toolbar .page-title-wrapper .page-count {
1574
- font-size: 12px;
1587
+ font-size: 0.75rem;
1575
1588
  font-weight: 700;
1576
1589
  color: var(--accent);
1577
1590
  background: rgba(234, 88, 12, 0.1);
1578
- padding: 3px 8px;
1579
- border-radius: 4px;
1591
+ padding: 0.1875rem 0.5rem;
1592
+ border-radius: 0.25rem;
1580
1593
  white-space: nowrap;
1581
1594
  }
1582
1595
 
1583
1596
  body .context-image-viewer .viewer .wrapper .toolbar .page-title-wrapper .page-title {
1584
- font-size: 14.5px;
1597
+ font-size: 0.9063rem;
1585
1598
  font-weight: 600;
1586
1599
  color: var(--foreground);
1587
1600
  white-space: nowrap;
@@ -1592,8 +1605,8 @@ body .context-image-viewer .viewer .wrapper .toolbar .page-title-wrapper .page-t
1592
1605
  body .context-image-viewer .viewer .wrapper .toolbar .context-switcher-wrapper {
1593
1606
  display: flex;
1594
1607
  align-items: center;
1595
- gap: 8px;
1596
- font-size: 13px;
1608
+ gap: 0.5rem;
1609
+ font-size: 0.8125rem;
1597
1610
  color: var(--text-muted);
1598
1611
  }
1599
1612
 
@@ -1602,13 +1615,13 @@ body .context-image-viewer .viewer .wrapper .toolbar .context-switcher-wrapper l
1602
1615
  }
1603
1616
 
1604
1617
  body .context-image-viewer .viewer .wrapper .toolbar .context-switcher-wrapper select.context-dropdown {
1605
- padding: 4px 10px;
1606
- border: 1px solid var(--border);
1607
- border-radius: 6px;
1618
+ padding: 0.25rem 0.625rem;
1619
+ border: 0.0625rem solid var(--border);
1620
+ border-radius: 0.375rem;
1608
1621
  background-color: var(--bg-card);
1609
1622
  color: var(--foreground);
1610
- font-size: 13px;
1611
- max-width: 260px;
1623
+ font-size: 0.8125rem;
1624
+ max-width: 16.25rem;
1612
1625
  outline: none;
1613
1626
  cursor: pointer;
1614
1627
  }
@@ -1616,17 +1629,17 @@ body .context-image-viewer .viewer .wrapper .toolbar .context-switcher-wrapper s
1616
1629
  body .context-image-viewer .viewer .wrapper .toolbar .smart-compare-wrapper {
1617
1630
  display: flex;
1618
1631
  align-items: center;
1619
- gap: 8px;
1620
- font-size: 13px;
1632
+ gap: 0.5rem;
1633
+ font-size: 0.8125rem;
1621
1634
  color: var(--text-muted);
1622
1635
  justify-content: flex-end;
1623
1636
  }
1624
1637
 
1625
1638
  body .context-image-viewer .viewer .wrapper .toolbar .smart-compare-wrapper .switch-wrapper {
1626
1639
  position: relative;
1627
- width: 40px;
1628
- height: 22px;
1629
- border-radius: 20px;
1640
+ width: 2.5rem;
1641
+ height: 1.375rem;
1642
+ border-radius: 1.25rem;
1630
1643
  background-color: #cbd5e1;
1631
1644
  cursor: pointer;
1632
1645
  transition: background-color 0.2s ease;
@@ -1634,14 +1647,14 @@ body .context-image-viewer .viewer .wrapper .toolbar .smart-compare-wrapper .swi
1634
1647
 
1635
1648
  body .context-image-viewer .viewer .wrapper .toolbar .smart-compare-wrapper .switch-wrapper .switch-knob {
1636
1649
  position: absolute;
1637
- width: 16px;
1638
- height: 16px;
1650
+ width: 1rem;
1651
+ height: 1rem;
1639
1652
  border-radius: 50%;
1640
1653
  background-color: #ffffff;
1641
- top: 3px;
1642
- left: 4px;
1654
+ top: 0.1875rem;
1655
+ left: 0.25rem;
1643
1656
  transition: left 0.2s ease;
1644
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
1657
+ box-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2);
1645
1658
  }
1646
1659
 
1647
1660
  body .context-image-viewer .viewer .wrapper .image-section {
@@ -1649,18 +1662,22 @@ body .context-image-viewer .viewer .wrapper .image-section {
1649
1662
  flex: 1;
1650
1663
  overflow: hidden;
1651
1664
  width: 100%;
1652
- height: calc(100% - 52px);
1665
+ height: calc(100% - 3.25rem);
1653
1666
  background-color: var(--bg-body);
1654
1667
  position: relative;
1668
+ user-select: none;
1669
+ -webkit-user-select: none;
1655
1670
  }
1656
1671
 
1657
1672
  body .context-image-viewer .viewer .wrapper .image-section .split-view {
1658
1673
  width: 100%;
1659
1674
  height: 100%;
1660
1675
  display: flex;
1661
- gap: 12px;
1662
- padding: 14px;
1676
+ gap: 0.75rem;
1677
+ padding: 0.875rem;
1663
1678
  box-sizing: border-box;
1679
+ user-select: none;
1680
+ -webkit-user-select: none;
1664
1681
  }
1665
1682
 
1666
1683
  body .context-image-viewer .viewer .wrapper .image-section .split-view .source-image-wrapper,
@@ -1672,10 +1689,14 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
1672
1689
  display: flex;
1673
1690
  align-items: center;
1674
1691
  justify-content: center;
1675
- border: 1px solid var(--border);
1676
- border-radius: 8px;
1692
+ border: 0.0625rem solid var(--border);
1693
+ border-radius: 0.5rem;
1677
1694
  background-color: var(--bg-card);
1678
1695
  position: relative;
1696
+ user-select: none;
1697
+ -webkit-user-select: none;
1698
+ -webkit-user-drag: none;
1699
+ outline: none;
1679
1700
  }
1680
1701
 
1681
1702
  body .context-image-viewer .viewer .wrapper .image-section .split-view .source-image-wrapper img,
@@ -1686,27 +1707,34 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
1686
1707
  transform: translate(0, 0) scale(1);
1687
1708
  transition: transform 0.1s ease-out;
1688
1709
  pointer-events: none;
1710
+ user-select: none;
1711
+ -webkit-user-select: none;
1712
+ -webkit-user-drag: none;
1689
1713
  }
1690
1714
 
1691
1715
  body .context-image-viewer .viewer .wrapper .image-section .split-view .source-image-wrapper .locale-name-bar,
1692
1716
  body .context-image-viewer .viewer .wrapper .image-section .split-view .target-image-wrapper .locale-name-bar {
1693
1717
  position: absolute;
1694
- top: 12px;
1695
- left: 12px;
1718
+ top: 0.75rem;
1719
+ left: 0.75rem;
1696
1720
  background-color: rgba(15, 23, 42, 0.75);
1697
1721
  color: #ffffff;
1698
- padding: 4px 10px;
1699
- border-radius: 4px;
1700
- font-size: 11.5px;
1722
+ padding: 0.25rem 0.625rem;
1723
+ border-radius: 0.25rem;
1724
+ font-size: 0.7188rem;
1701
1725
  font-weight: 600;
1702
- letter-spacing: 0.5px;
1726
+ letter-spacing: 0.0313rem;
1703
1727
  z-index: 5;
1704
1728
  pointer-events: none;
1729
+ user-select: none;
1730
+ -webkit-user-select: none;
1705
1731
  }
1706
1732
 
1707
1733
  body .context-image-viewer .viewer .wrapper .image-section .split-view .source-image-wrapper .locale-name-bar span,
1708
1734
  body .context-image-viewer .viewer .wrapper .image-section .split-view .target-image-wrapper .locale-name-bar span {
1709
1735
  opacity: 0.95;
1736
+ user-select: none;
1737
+ -webkit-user-select: none;
1710
1738
  }
1711
1739
 
1712
1740
  .--hidden {
@@ -1722,8 +1750,8 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
1722
1750
  /* ApexCharts theme adjustments */
1723
1751
  .apexcharts-tooltip.apexcharts-theme-dark {
1724
1752
  background: #18181b !important;
1725
- border: 1px solid #27272a !important;
1726
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
1753
+ border: 0.0625rem solid #27272a !important;
1754
+ box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3) !important;
1727
1755
  }
1728
1756
 
1729
1757
  .apexcharts-text {
@@ -1733,50 +1761,50 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
1733
1761
 
1734
1762
  /* Consolidated Analytics Card */
1735
1763
  .analytics-card {
1736
- padding: 20px 20px 16px 20px;
1764
+ padding: 1.25rem 1.25rem 1rem 1.25rem;
1737
1765
  background-color: var(--bg-card);
1738
- border: 1px solid var(--border);
1766
+ border: 0.0625rem solid var(--border);
1739
1767
  border-radius: var(--radius);
1740
- margin-bottom: 24px;
1768
+ margin-bottom: 1.5rem;
1741
1769
  }
1742
1770
 
1743
1771
  .analytics-card-header {
1744
- margin-bottom: 16px;
1745
- padding-bottom: 12px;
1746
- border-bottom: 1px solid var(--border);
1772
+ margin-bottom: 1rem;
1773
+ padding-bottom: 0.75rem;
1774
+ border-bottom: 0.0625rem solid var(--border);
1747
1775
  }
1748
1776
 
1749
1777
  .analytics-title-group .title {
1750
- font-size: 18px;
1778
+ font-size: 1.125rem;
1751
1779
  font-weight: 700;
1752
1780
  color: var(--foreground);
1753
1781
  }
1754
1782
 
1755
1783
  .analytics-subtitle {
1756
- margin: 4px 0 0 0;
1757
- font-size: 13px;
1784
+ margin: 0.25rem 0 0 0;
1785
+ font-size: 0.8125rem;
1758
1786
  color: var(--text-muted);
1759
1787
  }
1760
1788
 
1761
1789
  .analytics-grid {
1762
1790
  display: grid;
1763
1791
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
1764
- gap: 14px;
1792
+ gap: 0.875rem;
1765
1793
  align-items: stretch;
1766
1794
  }
1767
1795
 
1768
- @media (max-width: 1100px) {
1796
+ @media (max-width: 68.75rem) {
1769
1797
  .analytics-grid {
1770
- grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
1771
- gap: 12px;
1798
+ grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr)) !important;
1799
+ gap: 0.75rem;
1772
1800
  }
1773
1801
  }
1774
1802
 
1775
1803
  .chart-panel {
1776
1804
  background-color: var(--muted-bg);
1777
- border: 1px solid var(--border);
1778
- border-radius: 8px;
1779
- padding: 12px 12px 8px 12px;
1805
+ border: 0.0625rem solid var(--border);
1806
+ border-radius: 0.5rem;
1807
+ padding: 0.75rem 0.75rem 0.5rem 0.75rem;
1780
1808
  display: flex;
1781
1809
  flex-direction: column;
1782
1810
  min-width: 0;
@@ -1788,7 +1816,7 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
1788
1816
 
1789
1817
  .chart-panel:hover {
1790
1818
  border-color: rgba(234, 88, 12, 0.35);
1791
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
1819
+ box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.04);
1792
1820
  }
1793
1821
 
1794
1822
  .chart-panel.skipped-items {
@@ -1796,26 +1824,26 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
1796
1824
  }
1797
1825
 
1798
1826
  .panel-header {
1799
- margin-bottom: 10px;
1827
+ margin-bottom: 0.625rem;
1800
1828
  }
1801
1829
 
1802
1830
  .panel-title-row {
1803
1831
  display: flex;
1804
1832
  align-items: center;
1805
- gap: 6px;
1833
+ gap: 0.375rem;
1806
1834
  }
1807
1835
 
1808
1836
  .panel-title {
1809
- font-size: 13.5px;
1837
+ font-size: 0.8438rem;
1810
1838
  font-weight: 600;
1811
1839
  color: var(--foreground);
1812
1840
  }
1813
1841
 
1814
1842
  .panel-desc {
1815
- font-size: 11.5px;
1843
+ font-size: 0.7188rem;
1816
1844
  color: var(--text-muted);
1817
1845
  display: block;
1818
- margin-top: 2px;
1846
+ margin-top: 0.125rem;
1819
1847
  }
1820
1848
 
1821
1849
 
@@ -1843,18 +1871,18 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
1843
1871
  .tooltip-icon:hover::after {
1844
1872
  content: attr(data-tooltip);
1845
1873
  position: absolute;
1846
- bottom: calc(100% + 8px);
1874
+ bottom: calc(100% + 0.5rem);
1847
1875
  left: 0;
1848
1876
  background: #18181b;
1849
1877
  color: #f4f4f5;
1850
- padding: 8px 12px;
1851
- border-radius: 6px;
1852
- font-size: 12px;
1878
+ padding: 0.67em 1em;
1879
+ border-radius: 0.5em;
1880
+ font-size: 0.75rem;
1853
1881
  line-height: 1.4;
1854
1882
  white-space: normal;
1855
- width: 250px;
1883
+ width: 15.625rem;
1856
1884
  z-index: 1000;
1857
- box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
1885
+ box-shadow: 0 0.25rem 0.875rem rgba(0, 0, 0, 0.25);
1858
1886
  pointer-events: none;
1859
1887
  font-weight: 400;
1860
1888
  }
@@ -1878,13 +1906,13 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
1878
1906
  .bar-tooltip-custom {
1879
1907
  display: inline-flex;
1880
1908
  align-items: center;
1881
- gap: 6px;
1882
- padding: 4px 8px;
1909
+ gap: 0.45em;
1910
+ padding: 0.3em 0.6em;
1883
1911
  background: #ffffff;
1884
- border: 1px solid #cbd5e1;
1885
- border-radius: 6px;
1886
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
1887
- font-size: 11px;
1912
+ border: 0.0625rem solid #cbd5e1;
1913
+ border-radius: 0.45em;
1914
+ box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.12);
1915
+ font-size: 0.6875rem;
1888
1916
  color: #0f172a;
1889
1917
  white-space: nowrap;
1890
1918
  font-family: inherit;
@@ -1893,8 +1921,8 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
1893
1921
 
1894
1922
  .pie-tooltip-dot,
1895
1923
  .bar-tooltip-dot {
1896
- width: 7px;
1897
- height: 7px;
1924
+ width: 0.5em;
1925
+ height: 0.5em;
1898
1926
  border-radius: 50%;
1899
1927
  flex-shrink: 0;
1900
1928
  }
@@ -1916,42 +1944,42 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
1916
1944
  margin-left: auto;
1917
1945
  display: inline-flex;
1918
1946
  align-items: center;
1919
- gap: 6px;
1947
+ gap: 0.54em;
1920
1948
  background: rgba(49, 233, 148, 0.12);
1921
- border: 1px solid rgba(49, 233, 148, 0.35);
1922
- padding: 2.5px 8px;
1923
- border-radius: 9999px;
1924
- font-size: 11px;
1949
+ border: 0.0625rem solid rgba(49, 233, 148, 0.35);
1950
+ padding: 0.22em 0.72em;
1951
+ border-radius: 999em;
1952
+ font-size: 0.6875rem;
1925
1953
  white-space: nowrap;
1926
1954
  }
1927
1955
 
1928
1956
  .coverage-header-badge .coverage-pulse-dot {
1929
- width: 6px;
1930
- height: 6px;
1957
+ width: 0.54em;
1958
+ height: 0.54em;
1931
1959
  border-radius: 50%;
1932
1960
  background: #10b981;
1933
- box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
1961
+ box-shadow: 0 0 0 0.18em rgba(16, 185, 129, 0.25);
1934
1962
  animation: coveragePulse 2s infinite ease-in-out;
1935
1963
  }
1936
1964
 
1937
1965
  @keyframes coveragePulse {
1938
1966
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
1939
- 70% { transform: scale(1); box-shadow: 0 0 0 4px rgba(16, 185, 129, 0); }
1967
+ 70% { transform: scale(1); box-shadow: 0 0 0 0.25rem rgba(16, 185, 129, 0); }
1940
1968
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
1941
1969
  }
1942
1970
 
1943
1971
  .coverage-header-badge .coverage-badge-label {
1944
1972
  color: var(--text-muted);
1945
1973
  font-weight: 500;
1946
- font-size: 10px;
1974
+ font-size: 0.625rem;
1947
1975
  text-transform: uppercase;
1948
- letter-spacing: 0.3px;
1976
+ letter-spacing: 0.0187rem;
1949
1977
  }
1950
1978
 
1951
1979
  .coverage-header-badge .coverage-badge-val {
1952
1980
  color: var(--foreground);
1953
1981
  font-weight: 700;
1954
- font-size: 11.5px;
1982
+ font-size: 0.7188rem;
1955
1983
  }
1956
1984
 
1957
1985
  /* Side-by-side Layout for String Quality Panel */
@@ -1959,17 +1987,17 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
1959
1987
  display: flex;
1960
1988
  align-items: center;
1961
1989
  justify-content: space-between;
1962
- gap: 6px;
1990
+ gap: 0.375rem;
1963
1991
  width: 100%;
1964
- margin-top: 2px;
1992
+ margin-top: 0.125rem;
1965
1993
  overflow: visible;
1966
1994
  }
1967
1995
 
1968
1996
  .string-pie-graph {
1969
- flex: 0 0 155px;
1970
- max-width: 155px;
1971
- min-width: 120px;
1972
- min-height: 195px;
1997
+ flex: 0 0 9.6875rem;
1998
+ max-width: 9.6875rem;
1999
+ min-width: 7.5rem;
2000
+ min-height: 12.1875rem;
1973
2001
  display: flex;
1974
2002
  align-items: center;
1975
2003
  justify-content: center;
@@ -1993,38 +2021,38 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
1993
2021
  /* Total Coverage Summary Card in Legend */
1994
2022
  .total-coverage-card {
1995
2023
  background: var(--bg-card);
1996
- border: 1px solid var(--border);
1997
- border-radius: 6px;
1998
- padding: 4px 7px;
1999
- margin-bottom: 5px;
2000
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
2024
+ border: 0.0625rem solid var(--border);
2025
+ border-radius: 0.375rem;
2026
+ padding: 0.25rem 0.4375rem;
2027
+ margin-bottom: 0.3125rem;
2028
+ box-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.03);
2001
2029
  }
2002
2030
 
2003
2031
  .coverage-card-header {
2004
2032
  display: flex;
2005
2033
  align-items: center;
2006
2034
  justify-content: space-between;
2007
- margin-bottom: 4px;
2035
+ margin-bottom: 0.25rem;
2008
2036
  }
2009
2037
 
2010
2038
  .coverage-card-title {
2011
- font-size: 10px;
2039
+ font-size: 0.625rem;
2012
2040
  font-weight: 600;
2013
2041
  color: var(--text-muted);
2014
2042
  text-transform: uppercase;
2015
- letter-spacing: 0.3px;
2043
+ letter-spacing: 0.0187rem;
2016
2044
  }
2017
2045
 
2018
2046
  .coverage-card-pct {
2019
- font-size: 12.5px;
2047
+ font-size: 0.7813rem;
2020
2048
  font-weight: 800;
2021
2049
  color: #10b981;
2022
2050
  }
2023
2051
 
2024
2052
  .coverage-card-bar {
2025
2053
  background: var(--muted-bg, #f1f5f9);
2026
- height: 5px;
2027
- border-radius: 3px;
2054
+ height: 0.3125rem;
2055
+ border-radius: 0.1875rem;
2028
2056
  overflow: hidden;
2029
2057
  position: relative;
2030
2058
  }
@@ -2032,7 +2060,7 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
2032
2060
  .coverage-card-fill {
2033
2061
  background: linear-gradient(90deg, #4F46E5, #5B6EE1);
2034
2062
  height: 100%;
2035
- border-radius: 3px;
2063
+ border-radius: 0.1875rem;
2036
2064
  transition: width 0.5s ease;
2037
2065
  }
2038
2066
 
@@ -2040,22 +2068,22 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
2040
2068
  .string-legend-list {
2041
2069
  display: flex;
2042
2070
  flex-direction: column;
2043
- gap: 3px;
2071
+ gap: 0.1875rem;
2044
2072
  }
2045
2073
 
2046
2074
  .legend-row-item {
2047
2075
  position: relative;
2048
2076
  display: flex;
2049
2077
  align-items: center;
2050
- font-size: 11px;
2078
+ font-size: 0.6875rem;
2051
2079
  color: var(--foreground);
2052
2080
  user-select: none;
2053
2081
  }
2054
2082
 
2055
2083
  .legend-row-item.is-clickable {
2056
2084
  cursor: pointer;
2057
- padding: 2.5px 5px;
2058
- border-radius: 4px;
2085
+ padding: 0.1563rem 0.3125rem;
2086
+ border-radius: 0.25rem;
2059
2087
  transition: background 0.15s ease;
2060
2088
  }
2061
2089
 
@@ -2069,19 +2097,19 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
2069
2097
  }
2070
2098
 
2071
2099
  .legend-circle-dot {
2072
- width: 8px;
2073
- height: 8px;
2100
+ width: 0.5rem;
2101
+ height: 0.5rem;
2074
2102
  border-radius: 50%;
2075
2103
  display: inline-block;
2076
2104
  flex-shrink: 0;
2077
- margin-right: 5px;
2105
+ margin-right: 0.3125rem;
2078
2106
  }
2079
2107
 
2080
2108
  .legend-row-label {
2081
2109
  display: inline-flex;
2082
2110
  align-items: center;
2083
- gap: 3px;
2084
- font-size: 10.5px;
2111
+ gap: 0.1875rem;
2112
+ font-size: 0.6563rem;
2085
2113
  color: var(--foreground);
2086
2114
  white-space: nowrap;
2087
2115
  overflow: hidden;
@@ -2091,7 +2119,7 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
2091
2119
  .legend-row-pct {
2092
2120
  font-weight: 600;
2093
2121
  color: var(--text-muted);
2094
- font-size: 10.5px;
2122
+ font-size: 0.6563rem;
2095
2123
  }
2096
2124
 
2097
2125
  /* Interactive Split Item (Ignored, DNT, User Inputs) */
@@ -2102,9 +2130,9 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
2102
2130
  .interactive-btn-inner {
2103
2131
  display: flex;
2104
2132
  align-items: center;
2105
- padding: 2.5px 5px;
2106
- border-radius: 5px;
2107
- border: 1px solid var(--border);
2133
+ padding: 0.1563rem 0.3125rem;
2134
+ border-radius: 0.3125rem;
2135
+ border: 0.0625rem solid var(--border);
2108
2136
  background: var(--bg-card);
2109
2137
  cursor: pointer;
2110
2138
  transition: all 0.15s ease;
@@ -2118,7 +2146,7 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
2118
2146
 
2119
2147
  .legend-row-item.is-open .interactive-btn-inner {
2120
2148
  border-color: var(--accent, #ea580c);
2121
- box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.15);
2149
+ box-shadow: 0 0 0 0.125rem rgba(234, 88, 12, 0.15);
2122
2150
  }
2123
2151
 
2124
2152
  .interactive-btn-inner .chevron-icon {
@@ -2140,27 +2168,27 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
2140
2168
  /* Vertical Dropdown Menu (Pops Below Row and Floats Unclipped) */
2141
2169
  .legend-row-item .split-dropdown-menu {
2142
2170
  position: absolute;
2143
- top: calc(100% + 4px);
2171
+ top: calc(100% + 0.25rem);
2144
2172
  bottom: auto;
2145
2173
  left: 0;
2146
2174
  width: 100%;
2147
- min-width: 145px;
2175
+ min-width: 9.0625rem;
2148
2176
  background: var(--bg-card);
2149
- border: 1px solid var(--border);
2150
- border-radius: 8px;
2151
- padding: 5px;
2152
- box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.15);
2177
+ border: 0.0625rem solid var(--border);
2178
+ border-radius: 0.5rem;
2179
+ padding: 0.3125rem;
2180
+ box-shadow: 0 0.625rem 1.5625rem -0.3125rem rgba(0, 0, 0, 0.25), 0 0.5rem 0.625rem -0.375rem rgba(0, 0, 0, 0.15);
2153
2181
  z-index: 100;
2154
2182
  display: flex;
2155
2183
  flex-direction: column;
2156
- gap: 3px;
2184
+ gap: 0.1875rem;
2157
2185
  animation: splitDropdownIn 0.15s ease-out;
2158
2186
  }
2159
2187
 
2160
2188
  @keyframes splitDropdownIn {
2161
2189
  from {
2162
2190
  opacity: 0;
2163
- transform: translateY(-4px);
2191
+ transform: translateY(-0.25rem);
2164
2192
  }
2165
2193
  to {
2166
2194
  opacity: 1;
@@ -2172,14 +2200,14 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
2172
2200
  display: flex;
2173
2201
  align-items: center;
2174
2202
  justify-content: space-between;
2175
- font-size: 9.5px;
2203
+ font-size: 0.5938rem;
2176
2204
  font-weight: 600;
2177
2205
  color: var(--text-muted);
2178
2206
  text-transform: uppercase;
2179
- letter-spacing: 0.3px;
2180
- padding: 2px 4px 4px 4px;
2181
- border-bottom: 1px solid var(--border);
2182
- margin-bottom: 2px;
2207
+ letter-spacing: 0.0187rem;
2208
+ padding: 0.125rem 0.25rem 0.25rem 0.25rem;
2209
+ border-bottom: 0.0625rem solid var(--border);
2210
+ margin-bottom: 0.125rem;
2183
2211
  }
2184
2212
 
2185
2213
  .legend-row-item .dropdown-header-total {
@@ -2191,10 +2219,10 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
2191
2219
  display: flex;
2192
2220
  align-items: center;
2193
2221
  justify-content: space-between;
2194
- gap: 8px;
2195
- padding: 4px 6px;
2196
- border-radius: 4px;
2197
- font-size: 11px;
2222
+ gap: 0.5rem;
2223
+ padding: 0.25rem 0.375rem;
2224
+ border-radius: 0.25rem;
2225
+ font-size: 0.6875rem;
2198
2226
  color: var(--foreground);
2199
2227
  cursor: pointer;
2200
2228
  transition: all 0.15s ease;
@@ -2213,77 +2241,77 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
2213
2241
  .legend-row-item .dropdown-item-left {
2214
2242
  display: inline-flex;
2215
2243
  align-items: center;
2216
- gap: 5px;
2244
+ gap: 0.3125rem;
2217
2245
  }
2218
2246
 
2219
2247
  .legend-row-item .dropdown-item-left .dot {
2220
- width: 7px;
2221
- height: 7px;
2248
+ width: 0.4375rem;
2249
+ height: 0.4375rem;
2222
2250
  border-radius: 50%;
2223
2251
  display: inline-block;
2224
2252
  flex-shrink: 0;
2225
2253
  }
2226
2254
 
2227
2255
  .legend-row-item .dropdown-item-label {
2228
- font-size: 11px;
2256
+ font-size: 0.6875rem;
2229
2257
  color: var(--foreground);
2230
2258
  }
2231
2259
 
2232
2260
  .legend-row-item .dropdown-item-val {
2233
2261
  font-weight: 600;
2234
- font-size: 11px;
2262
+ font-size: 0.6875rem;
2235
2263
  color: var(--foreground);
2236
2264
  }
2237
2265
 
2238
2266
  /* Modern Log Viewer Card */
2239
2267
  .log-viewer-card {
2240
2268
  background-color: var(--bg-card);
2241
- border: 1px solid var(--border);
2269
+ border: 0.0625rem solid var(--border);
2242
2270
  border-radius: var(--radius);
2243
2271
  overflow: hidden;
2244
2272
  display: flex;
2245
2273
  flex-direction: column;
2246
- height: calc(100vh - 120px);
2247
- min-height: 600px;
2274
+ height: calc(100vh - 7.5rem);
2275
+ min-height: 37.5rem;
2248
2276
  }
2249
2277
 
2250
2278
  .log-toolbar {
2251
- padding: 12px 18px;
2279
+ padding: 0.75rem 1.125rem;
2252
2280
  background-color: var(--bg-card);
2253
- border-bottom: 1px solid var(--border);
2281
+ border-bottom: 0.0625rem solid var(--border);
2254
2282
  display: flex;
2255
2283
  align-items: center;
2256
2284
  justify-content: space-between;
2257
- gap: 16px;
2285
+ gap: 1rem;
2258
2286
  flex-wrap: wrap;
2259
2287
  }
2260
2288
 
2261
2289
  .log-toolbar-left {
2262
2290
  display: flex;
2263
2291
  align-items: center;
2264
- gap: 14px;
2292
+ gap: 0.875rem;
2265
2293
  }
2266
2294
 
2267
2295
  .log-heading {
2268
2296
  display: flex;
2269
2297
  align-items: center;
2270
- gap: 8px;
2298
+ gap: 0.5rem;
2271
2299
  font-weight: 600;
2272
- font-size: 14px;
2300
+ font-size: 0.875rem;
2273
2301
  color: var(--foreground);
2274
2302
  }
2275
2303
 
2276
2304
  .log-stat-badges {
2277
2305
  display: flex;
2278
- gap: 6px;
2306
+ gap: 0.375rem;
2279
2307
  }
2280
2308
 
2281
2309
  .log-badge-stat {
2282
- font-size: 11px;
2310
+ font-size: 0.6875rem;
2283
2311
  font-weight: 500;
2284
- padding: 2px 7px;
2285
- border-radius: 4px;
2286
- border: 1px solid var(--border);
2312
+ padding: 0.18em 0.64em;
2313
+ border-radius: 0.36em;
2314
+ border: 0.0625rem solid var(--border);
2287
2315
  background-color: var(--muted-bg);
2288
2316
  color: var(--text-muted);
2289
2317
  }
@@ -2295,25 +2323,25 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
2295
2323
  .log-toolbar-right {
2296
2324
  display: flex;
2297
2325
  align-items: center;
2298
- gap: 10px;
2326
+ gap: 0.625rem;
2299
2327
  }
2300
2328
 
2301
2329
  .log-level-pills {
2302
2330
  display: flex;
2303
2331
  background-color: var(--muted-bg);
2304
- border-radius: 6px;
2305
- padding: 2px;
2306
- gap: 2px;
2332
+ border-radius: 0.375rem;
2333
+ padding: 0.125rem;
2334
+ gap: 0.125rem;
2307
2335
  }
2308
2336
 
2309
2337
  .log-level-btn {
2310
2338
  border: none;
2311
2339
  background: transparent;
2312
- padding: 4px 10px;
2313
- font-size: 12px;
2340
+ padding: 0.33em 0.83em;
2341
+ font-size: 0.75rem;
2314
2342
  font-weight: 500;
2315
2343
  color: var(--text-muted);
2316
- border-radius: 4px;
2344
+ border-radius: 0.33em;
2317
2345
  cursor: pointer;
2318
2346
  transition: all 0.15s ease;
2319
2347
  }
@@ -2321,7 +2349,7 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
2321
2349
  .log-level-btn.active {
2322
2350
  background-color: var(--bg-card);
2323
2351
  color: var(--foreground);
2324
- box-shadow: 0 1px 3px rgba(0,0,0,0.08);
2352
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0,0,0,0.08);
2325
2353
  font-weight: 600;
2326
2354
  }
2327
2355
 
@@ -2333,19 +2361,19 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
2333
2361
 
2334
2362
  .search-svg {
2335
2363
  position: absolute;
2336
- left: 10px;
2364
+ left: 0.625rem;
2337
2365
  color: var(--text-muted);
2338
2366
  pointer-events: none;
2339
2367
  }
2340
2368
 
2341
2369
  .log-search-field {
2342
- padding: 5px 12px 5px 28px;
2343
- font-size: 12px;
2344
- border: 1px solid var(--border);
2345
- border-radius: 6px;
2370
+ padding: 0.3125rem 0.75rem 0.3125rem 1.75rem;
2371
+ font-size: 0.75rem;
2372
+ border: 0.0625rem solid var(--border);
2373
+ border-radius: 0.375rem;
2346
2374
  background-color: var(--muted-bg);
2347
2375
  color: var(--foreground);
2348
- width: 180px;
2376
+ width: 11.25rem;
2349
2377
  outline: none;
2350
2378
  transition: all 0.15s ease;
2351
2379
  }
@@ -2353,19 +2381,19 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
2353
2381
  .log-search-field:focus {
2354
2382
  border-color: var(--accent);
2355
2383
  background-color: var(--bg-card);
2356
- width: 220px;
2384
+ width: 13.75rem;
2357
2385
  }
2358
2386
 
2359
2387
  .log-tool-btn {
2360
2388
  display: inline-flex;
2361
2389
  align-items: center;
2362
- gap: 5px;
2390
+ gap: 0.3125rem;
2363
2391
  background-color: var(--muted-bg);
2364
- border: 1px solid var(--border);
2392
+ border: 0.0625rem solid var(--border);
2365
2393
  color: var(--foreground);
2366
- padding: 5px 10px;
2367
- border-radius: 6px;
2368
- font-size: 12px;
2394
+ padding: 0.3125rem 0.625rem;
2395
+ border-radius: 0.375rem;
2396
+ font-size: 0.75rem;
2369
2397
  font-weight: 500;
2370
2398
  cursor: pointer;
2371
2399
  transition: all 0.15s ease;
@@ -2387,7 +2415,7 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
2387
2415
  overflow-x: auto;
2388
2416
  background-color: var(--bg-card);
2389
2417
  font-family: 'JetBrains Mono', 'Menlo', 'Monaco', monospace;
2390
- font-size: 12.5px;
2418
+ font-size: 0.7813rem;
2391
2419
  line-height: 1.6;
2392
2420
  }
2393
2421
 
@@ -2396,7 +2424,7 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
2396
2424
  }
2397
2425
 
2398
2426
  .log-lines {
2399
- padding: 8px 0;
2427
+ padding: 0.5rem 0;
2400
2428
  min-width: 100%;
2401
2429
  width: max-content;
2402
2430
  }
@@ -2408,8 +2436,8 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
2408
2436
  .log-row {
2409
2437
  display: flex;
2410
2438
  align-items: flex-start;
2411
- padding: 2px 14px;
2412
- gap: 12px;
2439
+ padding: 0.125rem 0.875rem;
2440
+ gap: 0.75rem;
2413
2441
  transition: background-color 0.1s ease;
2414
2442
  }
2415
2443
 
@@ -2426,14 +2454,14 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
2426
2454
  }
2427
2455
 
2428
2456
  .log-ln {
2429
- width: 44px;
2430
- min-width: 44px;
2457
+ width: 2.75rem;
2458
+ min-width: 2.75rem;
2431
2459
  text-align: right;
2432
2460
  color: var(--text-muted);
2433
2461
  user-select: none;
2434
2462
  opacity: 0.6;
2435
- font-size: 11px;
2436
- padding-top: 1px;
2463
+ font-size: 0.6875rem;
2464
+ padding-top: 0.0625rem;
2437
2465
  }
2438
2466
 
2439
2467
  .log-msg {
@@ -2449,11 +2477,11 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
2449
2477
 
2450
2478
  .log-badge {
2451
2479
  display: inline-block;
2452
- font-size: 10.5px;
2480
+ font-size: 0.6563rem;
2453
2481
  font-weight: 700;
2454
- padding: 1px 5px;
2455
- border-radius: 4px;
2456
- margin-right: 6px;
2482
+ padding: 0.1em 0.48em;
2483
+ border-radius: 0.38em;
2484
+ margin-right: 0.57em;
2457
2485
  vertical-align: middle;
2458
2486
  }
2459
2487
 
@@ -2467,12 +2495,12 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
2467
2495
  .log-highlight {
2468
2496
  background-color: #fde047;
2469
2497
  color: #0f172a;
2470
- padding: 1px 3px;
2471
- border-radius: 2px;
2498
+ padding: 0.1em 0.3em;
2499
+ border-radius: 0.2em;
2472
2500
  }
2473
2501
 
2474
2502
  .log-empty-state {
2475
- padding: 40px;
2503
+ padding: 2.5rem;
2476
2504
  text-align: center;
2477
2505
  color: var(--text-muted);
2478
2506
  font-style: italic;
@@ -2481,43 +2509,43 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
2481
2509
  /* Insights Table View */
2482
2510
  .insights-card {
2483
2511
  background-color: var(--bg-card);
2484
- border: 1px solid var(--border);
2512
+ border: 0.0625rem solid var(--border);
2485
2513
  border-radius: var(--radius);
2486
- padding: 24px;
2514
+ padding: 1.5rem;
2487
2515
  }
2488
2516
 
2489
2517
  .insights-card-header {
2490
2518
  display: flex;
2491
2519
  align-items: center;
2492
2520
  justify-content: space-between;
2493
- margin-bottom: 20px;
2494
- padding-bottom: 16px;
2495
- border-bottom: 1px solid var(--border);
2521
+ margin-bottom: 1.25rem;
2522
+ padding-bottom: 1rem;
2523
+ border-bottom: 0.0625rem solid var(--border);
2496
2524
  flex-wrap: wrap;
2497
- gap: 12px;
2525
+ gap: 0.75rem;
2498
2526
  }
2499
2527
 
2500
2528
  .insights-card-header .title {
2501
- font-size: 18px;
2529
+ font-size: 1.125rem;
2502
2530
  font-weight: 700;
2503
2531
  color: var(--foreground);
2504
2532
  }
2505
2533
 
2506
2534
  .insights-subtitle {
2507
- margin: 4px 0 0 0;
2508
- font-size: 13px;
2535
+ margin: 0.25rem 0 0 0;
2536
+ font-size: 0.8125rem;
2509
2537
  color: var(--text-muted);
2510
2538
  }
2511
2539
 
2512
2540
  .insights-search-field {
2513
- padding: 6px 12px;
2514
- font-size: 13px;
2515
- border: 1px solid var(--border);
2516
- border-radius: 6px;
2541
+ padding: 0.375rem 0.75rem;
2542
+ font-size: 0.8125rem;
2543
+ border: 0.0625rem solid var(--border);
2544
+ border-radius: 0.375rem;
2517
2545
  background-color: var(--muted-bg);
2518
2546
  color: var(--foreground);
2519
2547
  outline: none;
2520
- width: 200px;
2548
+ width: 12.5rem;
2521
2549
  transition: all 0.15s ease;
2522
2550
  }
2523
2551
 
@@ -2528,31 +2556,31 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
2528
2556
 
2529
2557
  .insights-table-container {
2530
2558
  overflow-x: auto;
2531
- border-radius: 8px;
2532
- border: 1px solid var(--border);
2559
+ border-radius: 0.5rem;
2560
+ border: 0.0625rem solid var(--border);
2533
2561
  }
2534
2562
 
2535
2563
  .insights-table {
2536
2564
  width: 100%;
2537
2565
  border-collapse: collapse;
2538
2566
  text-align: left;
2539
- font-size: 13px;
2567
+ font-size: 0.8125rem;
2540
2568
  }
2541
2569
 
2542
2570
  .insights-table th {
2543
2571
  background-color: var(--muted-bg);
2544
2572
  color: var(--text-muted);
2545
2573
  font-weight: 600;
2546
- font-size: 12px;
2574
+ font-size: 0.75rem;
2547
2575
  text-transform: uppercase;
2548
- letter-spacing: 0.3px;
2549
- padding: 12px 14px;
2550
- border-bottom: 1px solid var(--border);
2576
+ letter-spacing: 0.0187rem;
2577
+ padding: 0.75rem 0.875rem;
2578
+ border-bottom: 0.0625rem solid var(--border);
2551
2579
  }
2552
2580
 
2553
2581
  .insights-table td {
2554
- padding: 12px 14px;
2555
- border-bottom: 1px solid var(--border);
2582
+ padding: 0.75rem 0.875rem;
2583
+ border-bottom: 0.0625rem solid var(--border);
2556
2584
  vertical-align: middle;
2557
2585
  }
2558
2586
 
@@ -2568,21 +2596,21 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
2568
2596
  .locale-code-cell {
2569
2597
  display: flex;
2570
2598
  align-items: center;
2571
- gap: 8px;
2599
+ gap: 0.5rem;
2572
2600
  }
2573
2601
 
2574
2602
  .locale-pill-name {
2575
2603
  font-weight: 600;
2576
2604
  color: var(--foreground);
2577
2605
  font-family: 'JetBrains Mono', monospace;
2578
- font-size: 13px;
2606
+ font-size: 0.8125rem;
2579
2607
  }
2580
2608
 
2581
2609
  .default-badge {
2582
- font-size: 10.5px;
2610
+ font-size: 0.6563rem;
2583
2611
  font-weight: 600;
2584
- padding: 1px 6px;
2585
- border-radius: 4px;
2612
+ padding: 0.1em 0.57em;
2613
+ border-radius: 0.38em;
2586
2614
  background-color: rgba(59, 130, 246, 0.12);
2587
2615
  color: #2563eb;
2588
2616
  }
@@ -2594,35 +2622,35 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
2594
2622
  .table-progress-cell {
2595
2623
  display: flex;
2596
2624
  align-items: center;
2597
- gap: 8px;
2598
- min-width: 110px;
2625
+ gap: 0.5rem;
2626
+ min-width: 6.875rem;
2599
2627
  }
2600
2628
 
2601
2629
  .table-progress-bar-bg {
2602
2630
  flex: 1;
2603
- height: 7px;
2631
+ height: 0.4375rem;
2604
2632
  background-color: var(--muted-bg);
2605
- border-radius: 4px;
2633
+ border-radius: 0.25rem;
2606
2634
  overflow: hidden;
2607
2635
  }
2608
2636
 
2609
2637
  .table-progress-bar {
2610
2638
  height: 100%;
2611
- border-radius: 4px;
2639
+ border-radius: 0.25rem;
2612
2640
  transition: width 0.3s ease;
2613
2641
  }
2614
2642
 
2615
2643
  .table-progress-val {
2616
- font-size: 12px;
2644
+ font-size: 0.75rem;
2617
2645
  font-weight: 600;
2618
- min-width: 32px;
2646
+ min-width: 2rem;
2619
2647
  text-align: right;
2620
2648
  color: var(--foreground);
2621
2649
  }
2622
2650
 
2623
2651
  .strings-summary-badges {
2624
2652
  display: flex;
2625
- gap: 4px;
2653
+ gap: 0.25rem;
2626
2654
  flex-wrap: wrap;
2627
2655
  }
2628
2656
 
@@ -2630,9 +2658,9 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
2630
2658
  display: inline-flex;
2631
2659
  align-items: center;
2632
2660
  justify-content: center;
2633
- padding: 2px 6px;
2634
- border-radius: 4px;
2635
- font-size: 11px;
2661
+ padding: 0.18em 0.55em;
2662
+ border-radius: 0.36em;
2663
+ font-size: 0.6875rem;
2636
2664
  font-weight: 600;
2637
2665
  }
2638
2666
 
@@ -2649,24 +2677,24 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
2649
2677
 
2650
2678
  .count-badge {
2651
2679
  display: inline-block;
2652
- padding: 2px 7px;
2653
- border-radius: 4px;
2680
+ padding: 0.17em 0.58em;
2681
+ border-radius: 0.33em;
2654
2682
  background-color: var(--muted-bg);
2655
2683
  color: var(--text-muted);
2656
2684
  font-weight: 500;
2657
- font-size: 12px;
2685
+ font-size: 0.75rem;
2658
2686
  }
2659
2687
 
2660
2688
  .btn-view-details {
2661
2689
  display: inline-flex;
2662
2690
  align-items: center;
2663
- gap: 4px;
2691
+ gap: 0.33em;
2664
2692
  background-color: var(--muted-bg);
2665
- border: 1px solid var(--border);
2693
+ border: 0.0625rem solid var(--border);
2666
2694
  color: var(--foreground);
2667
- padding: 5px 10px;
2668
- border-radius: 6px;
2669
- font-size: 12px;
2695
+ padding: 0.42em 0.83em;
2696
+ border-radius: 0.5em;
2697
+ font-size: 0.75rem;
2670
2698
  font-weight: 500;
2671
2699
  cursor: pointer;
2672
2700
  transition: all 0.15s ease;
@@ -2688,14 +2716,14 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
2688
2716
  .cat-pill {
2689
2717
  display: inline-flex;
2690
2718
  align-items: center;
2691
- padding: 2px 8px;
2692
- border-radius: 5px;
2693
- font-size: 11.5px;
2719
+ padding: 0.17em 0.7em;
2720
+ border-radius: 0.43em;
2721
+ font-size: 0.7188rem;
2694
2722
  font-weight: 600;
2695
- letter-spacing: 0.2px;
2723
+ letter-spacing: 0.0125rem;
2696
2724
  background-color: var(--muted-bg);
2697
2725
  color: var(--foreground);
2698
- border: 1px solid var(--border);
2726
+ border: 0.0625rem solid var(--border);
2699
2727
  }
2700
2728
 
2701
2729
  .cat-pill.cat-strings { background: rgba(59, 130, 246, 0.1); color: #2563eb; border-color: rgba(59, 130, 246, 0.2); }
@@ -2726,9 +2754,9 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
2726
2754
  .status-badge {
2727
2755
  display: inline-flex;
2728
2756
  align-items: center;
2729
- padding: 2px 8px;
2730
- border-radius: 5px;
2731
- font-size: 11.5px;
2757
+ padding: 0.17em 0.7em;
2758
+ border-radius: 0.43em;
2759
+ font-size: 0.7188rem;
2732
2760
  font-weight: 600;
2733
2761
  }
2734
2762
 
@@ -2751,7 +2779,7 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
2751
2779
  }
2752
2780
 
2753
2781
  .chart-panel .graph {
2754
- min-height: 220px;
2782
+ min-height: 13.75rem;
2755
2783
  width: 100%;
2756
2784
  overflow: visible;
2757
2785
  }
@@ -2761,18 +2789,18 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
2761
2789
  width: 100%;
2762
2790
  table-layout: fixed;
2763
2791
  border-collapse: collapse;
2764
- font-size: 13px;
2792
+ font-size: 0.8125rem;
2765
2793
  }
2766
2794
 
2767
2795
  .insights-table thead th {
2768
2796
  background: var(--muted-bg);
2769
2797
  color: var(--text-muted);
2770
2798
  font-weight: 600;
2771
- font-size: 12px;
2799
+ font-size: 0.75rem;
2772
2800
  text-transform: uppercase;
2773
- letter-spacing: 0.5px;
2774
- padding: 12px 14px;
2775
- border-bottom: 2px solid var(--border);
2801
+ letter-spacing: 0.0313rem;
2802
+ padding: 0.75rem 0.875rem;
2803
+ border-bottom: 0.125rem solid var(--border);
2776
2804
  position: sticky;
2777
2805
  top: 0;
2778
2806
  z-index: 2;
@@ -2793,37 +2821,37 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
2793
2821
  display: flex;
2794
2822
  flex-direction: column;
2795
2823
  align-items: center;
2796
- gap: 4px;
2824
+ gap: 0.25rem;
2797
2825
  }
2798
2826
 
2799
2827
  .locale-col-code {
2800
2828
  font-weight: 700;
2801
- font-size: 13px;
2829
+ font-size: 0.8125rem;
2802
2830
  color: var(--text-primary);
2803
- letter-spacing: 0.5px;
2831
+ letter-spacing: 0.0313rem;
2804
2832
  }
2805
2833
 
2806
2834
  .col-default-badge {
2807
- font-size: 10px;
2835
+ font-size: 0.625rem;
2808
2836
  font-weight: 600;
2809
2837
  background: rgba(59, 130, 246, 0.12);
2810
2838
  color: #3b82f6;
2811
- border-radius: 4px;
2812
- padding: 1px 5px;
2839
+ border-radius: 0.4em;
2840
+ padding: 0.1em 0.5em;
2813
2841
  text-transform: uppercase;
2814
2842
  }
2815
2843
 
2816
2844
  .btn-col-drilldown {
2817
2845
  display: inline-flex;
2818
2846
  align-items: center;
2819
- gap: 4px;
2847
+ gap: 0.36em;
2820
2848
  background: var(--card-bg);
2821
- border: 1px solid var(--border);
2849
+ border: 0.0625rem solid var(--border);
2822
2850
  color: var(--text-muted);
2823
- font-size: 11px;
2851
+ font-size: 0.6875rem;
2824
2852
  font-weight: 500;
2825
- padding: 2px 7px;
2826
- border-radius: 4px;
2853
+ padding: 0.18em 0.64em;
2854
+ border-radius: 0.36em;
2827
2855
  cursor: pointer;
2828
2856
  transition: all 0.15s ease;
2829
2857
  }
@@ -2835,7 +2863,7 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
2835
2863
  }
2836
2864
 
2837
2865
  .insights-table tbody tr {
2838
- border-bottom: 1px solid var(--border);
2866
+ border-bottom: 0.0625rem solid var(--border);
2839
2867
  transition: background-color 0.15s ease;
2840
2868
  }
2841
2869
 
@@ -2849,7 +2877,7 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
2849
2877
 
2850
2878
  .insights-table tbody tr.row-total {
2851
2879
  background-color: var(--muted-bg);
2852
- border-top: 2px solid var(--border);
2880
+ border-top: 0.125rem solid var(--border);
2853
2881
  font-weight: 600;
2854
2882
  }
2855
2883
 
@@ -2858,29 +2886,29 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
2858
2886
  }
2859
2887
 
2860
2888
  .metric-name-cell {
2861
- padding: 11px 16px;
2889
+ padding: 0.6875rem 1rem;
2862
2890
  vertical-align: middle;
2863
2891
  }
2864
2892
 
2865
2893
  .metric-name-inner {
2866
2894
  display: flex;
2867
2895
  align-items: center;
2868
- gap: 10px;
2896
+ gap: 0.625rem;
2869
2897
  }
2870
2898
 
2871
2899
  .metric-cat-pill {
2872
2900
  display: inline-flex;
2873
2901
  align-items: center;
2874
2902
  justify-content: center;
2875
- font-size: 10px;
2903
+ font-size: 0.625rem;
2876
2904
  font-weight: 700;
2877
2905
  text-transform: uppercase;
2878
- letter-spacing: 0.4px;
2879
- padding: 3px 6px;
2880
- border-radius: 4px;
2881
- width: 84px;
2882
- min-width: 84px;
2883
- max-width: 84px;
2906
+ letter-spacing: 0.025rem;
2907
+ padding: 0.1875rem 0.375rem;
2908
+ border-radius: 0.25rem;
2909
+ width: 5.25rem;
2910
+ min-width: 5.25rem;
2911
+ max-width: 5.25rem;
2884
2912
  text-align: center;
2885
2913
  flex-shrink: 0;
2886
2914
  }
@@ -2897,14 +2925,14 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
2897
2925
  .cat-summary { background: rgba(234, 88, 12, 0.16); color: var(--primary); }
2898
2926
 
2899
2927
  .metric-title-text {
2900
- font-size: 13.5px;
2928
+ font-size: 0.8438rem;
2901
2929
  color: var(--text-primary);
2902
2930
  font-weight: 500;
2903
2931
  }
2904
2932
 
2905
2933
  .metric-value-cell {
2906
2934
  text-align: center;
2907
- padding: 8px 10px;
2935
+ padding: 0.5rem 0.625rem;
2908
2936
  vertical-align: middle;
2909
2937
  }
2910
2938
 
@@ -2912,20 +2940,20 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
2912
2940
  display: inline-flex;
2913
2941
  align-items: center;
2914
2942
  justify-content: center;
2915
- gap: 5px;
2916
- padding: 4px 10px;
2917
- border-radius: 6px;
2918
- border: 1px solid transparent;
2919
- font-size: 12.5px;
2943
+ gap: 0.4em;
2944
+ padding: 0.32em 0.8em;
2945
+ border-radius: 0.48em;
2946
+ border: 0.0625rem solid transparent;
2947
+ font-size: 0.7813rem;
2920
2948
  font-weight: 600;
2921
2949
  cursor: pointer;
2922
2950
  transition: all 0.15s ease;
2923
- min-width: 44px;
2951
+ min-width: 3.5em;
2924
2952
  }
2925
2953
 
2926
2954
  .metric-cell-btn:hover {
2927
- transform: translateY(-1px);
2928
- box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
2955
+ transform: translateY(-0.0625rem);
2956
+ box-shadow: 0 0.1875rem 0.5rem rgba(0, 0, 0, 0.12);
2929
2957
  }
2930
2958
 
2931
2959
  .metric-cell-btn.badge-green {
@@ -3003,7 +3031,7 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
3003
3031
  .cell-zero {
3004
3032
  color: var(--text-muted);
3005
3033
  opacity: 0.45;
3006
- font-size: 13px;
3034
+ font-size: 0.8125rem;
3007
3035
  font-weight: 500;
3008
3036
  }
3009
3037
 
@@ -3029,22 +3057,22 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
3029
3057
  position: fixed;
3030
3058
  inset: 0;
3031
3059
  background: rgba(15, 23, 42, 0.65);
3032
- backdrop-filter: blur(4px);
3033
- -webkit-backdrop-filter: blur(4px);
3060
+ backdrop-filter: blur(0.25rem);
3061
+ -webkit-backdrop-filter: blur(0.25rem);
3034
3062
  }
3035
3063
 
3036
3064
  .gallery-modal-dialog {
3037
3065
  position: relative;
3038
3066
  z-index: 10001;
3039
3067
  background: var(--card-bg);
3040
- border: 1px solid var(--border);
3041
- border-radius: 12px;
3068
+ border: 0.0625rem solid var(--border);
3069
+ border-radius: 0.75rem;
3042
3070
  width: 90vw;
3043
- max-width: 940px;
3071
+ max-width: 58.75rem;
3044
3072
  max-height: 90vh;
3045
3073
  display: flex;
3046
3074
  flex-direction: column;
3047
- box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
3075
+ box-shadow: 0 1.5625rem 3.75rem rgba(0, 0, 0, 0.35);
3048
3076
  overflow: hidden;
3049
3077
  margin: auto;
3050
3078
  top: 50%;
@@ -3055,41 +3083,41 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
3055
3083
  display: flex;
3056
3084
  align-items: center;
3057
3085
  justify-content: space-between;
3058
- padding: 14px 20px;
3059
- border-bottom: 1px solid var(--border);
3086
+ padding: 0.875rem 1.25rem;
3087
+ border-bottom: 0.0625rem solid var(--border);
3060
3088
  background: var(--muted-bg);
3061
3089
  }
3062
3090
 
3063
3091
  .gallery-header-info {
3064
3092
  display: flex;
3065
3093
  align-items: center;
3066
- gap: 10px;
3094
+ gap: 0.625rem;
3067
3095
  }
3068
3096
 
3069
3097
  .gallery-modal-title {
3070
- font-size: 15.5px;
3098
+ font-size: 0.9688rem;
3071
3099
  font-weight: 600;
3072
3100
  color: var(--text-primary);
3073
3101
  }
3074
3102
 
3075
3103
  .gallery-modal-badge {
3076
- font-size: 11.5px;
3104
+ font-size: 0.7188rem;
3077
3105
  font-weight: 600;
3078
3106
  background: rgba(234, 88, 12, 0.12);
3079
3107
  color: var(--primary);
3080
- border-radius: 12px;
3081
- padding: 2px 8px;
3108
+ border-radius: 1em;
3109
+ padding: 0.17em 0.7em;
3082
3110
  }
3083
3111
 
3084
3112
  .gallery-close-btn {
3085
3113
  background: transparent;
3086
3114
  border: none;
3087
- font-size: 24px;
3115
+ font-size: 1.5rem;
3088
3116
  line-height: 1;
3089
3117
  color: var(--text-muted);
3090
3118
  cursor: pointer;
3091
- padding: 0 4px;
3092
- border-radius: 4px;
3119
+ padding: 0 0.25rem;
3120
+ border-radius: 0.25rem;
3093
3121
  transition: color 0.15s ease;
3094
3122
  }
3095
3123
  .gallery-close-btn:hover {
@@ -3097,17 +3125,17 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
3097
3125
  }
3098
3126
 
3099
3127
  .gallery-modal-body {
3100
- padding: 16px 20px;
3128
+ padding: 1rem 1.25rem;
3101
3129
  overflow-y: auto;
3102
3130
  display: flex;
3103
3131
  flex-direction: column;
3104
- gap: 12px;
3132
+ gap: 0.75rem;
3105
3133
  }
3106
3134
 
3107
3135
  .gallery-preview-container {
3108
3136
  display: flex;
3109
3137
  flex-direction: column;
3110
- gap: 10px;
3138
+ gap: 0.625rem;
3111
3139
  }
3112
3140
 
3113
3141
  .gallery-image-wrapper {
@@ -3115,17 +3143,17 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
3115
3143
  display: flex;
3116
3144
  align-items: center;
3117
3145
  justify-content: center;
3118
- min-height: 340px;
3119
- max-height: 480px;
3146
+ min-height: 21.25rem;
3147
+ max-height: 30rem;
3120
3148
  background: #0f172a;
3121
- border-radius: 8px;
3149
+ border-radius: 0.5rem;
3122
3150
  overflow: hidden;
3123
- border: 1px solid var(--border);
3151
+ border: 0.0625rem solid var(--border);
3124
3152
  }
3125
3153
 
3126
3154
  #galleryMainImg {
3127
3155
  max-width: 100%;
3128
- max-height: 460px;
3156
+ max-height: 28.75rem;
3129
3157
  object-fit: contain;
3130
3158
  display: block;
3131
3159
  }
@@ -3135,26 +3163,26 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
3135
3163
  top: 50%;
3136
3164
  transform: translateY(-50%);
3137
3165
  background: rgba(15, 23, 42, 0.85);
3138
- border: 1.5px solid rgba(255, 255, 255, 0.4);
3166
+ border: 0.0938rem solid rgba(255, 255, 255, 0.4);
3139
3167
  color: #ffffff;
3140
- width: 42px;
3141
- height: 42px;
3168
+ width: 2.625rem;
3169
+ height: 2.625rem;
3142
3170
  border-radius: 50%;
3143
3171
  display: flex;
3144
3172
  align-items: center;
3145
3173
  justify-content: center;
3146
3174
  cursor: pointer;
3147
3175
  transition: all 0.15s ease;
3148
- backdrop-filter: blur(4px);
3176
+ backdrop-filter: blur(0.25rem);
3149
3177
  z-index: 25;
3150
- box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
3178
+ box-shadow: 0 0.25rem 0.875rem rgba(0, 0, 0, 0.35);
3151
3179
  }
3152
3180
  .gallery-nav-btn:hover:not(:disabled) {
3153
3181
  background: var(--primary, #ea580c);
3154
3182
  border-color: #ffffff;
3155
3183
  color: #ffffff;
3156
3184
  transform: translateY(-50%) scale(1.1);
3157
- box-shadow: 0 6px 18px rgba(234, 88, 12, 0.4);
3185
+ box-shadow: 0 0.375rem 1.125rem rgba(234, 88, 12, 0.4);
3158
3186
  }
3159
3187
  .gallery-nav-btn:disabled {
3160
3188
  opacity: 0.35;
@@ -3165,26 +3193,26 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
3165
3193
  box-shadow: none;
3166
3194
  }
3167
3195
 
3168
- .gallery-nav-btn.prev-btn { left: 14px; }
3169
- .gallery-nav-btn.next-btn { right: 14px; }
3196
+ .gallery-nav-btn.prev-btn { left: 0.875rem; }
3197
+ .gallery-nav-btn.next-btn { right: 0.875rem; }
3170
3198
 
3171
3199
  .gallery-fullscreen-btn {
3172
3200
  position: absolute;
3173
- top: 12px;
3174
- right: 12px;
3201
+ top: 0.75rem;
3202
+ right: 0.75rem;
3175
3203
  display: inline-flex;
3176
3204
  align-items: center;
3177
- gap: 6px;
3205
+ gap: 0.375rem;
3178
3206
  background: rgba(15, 23, 42, 0.75);
3179
- border: 1px solid rgba(255, 255, 255, 0.2);
3207
+ border: 0.0625rem solid rgba(255, 255, 255, 0.2);
3180
3208
  color: #fff;
3181
- font-size: 11.5px;
3209
+ font-size: 0.7188rem;
3182
3210
  font-weight: 500;
3183
- padding: 5px 10px;
3184
- border-radius: 6px;
3211
+ padding: 0.3125rem 0.625rem;
3212
+ border-radius: 0.375rem;
3185
3213
  cursor: pointer;
3186
3214
  transition: all 0.15s ease;
3187
- backdrop-filter: blur(4px);
3215
+ backdrop-filter: blur(0.25rem);
3188
3216
  }
3189
3217
  .gallery-fullscreen-btn:hover {
3190
3218
  background: var(--primary);
@@ -3193,17 +3221,17 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
3193
3221
 
3194
3222
  .gallery-item-details {
3195
3223
  background: var(--muted-bg);
3196
- border: 1px solid var(--border);
3197
- border-radius: 8px;
3198
- padding: 10px 14px;
3224
+ border: 0.0625rem solid var(--border);
3225
+ border-radius: 0.5rem;
3226
+ padding: 0.625rem 0.875rem;
3199
3227
  }
3200
3228
 
3201
3229
  .gallery-meta-row {
3202
3230
  display: flex;
3203
3231
  align-items: center;
3204
3232
  justify-content: space-between;
3205
- margin-bottom: 5px;
3206
- font-size: 12px;
3233
+ margin-bottom: 0.3125rem;
3234
+ font-size: 0.75rem;
3207
3235
  }
3208
3236
 
3209
3237
  .gallery-counter {
@@ -3217,7 +3245,7 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
3217
3245
  }
3218
3246
 
3219
3247
  .gallery-text-box {
3220
- font-size: 13px;
3248
+ font-size: 0.8125rem;
3221
3249
  color: var(--text-primary);
3222
3250
  word-break: break-word;
3223
3251
  }
@@ -3225,34 +3253,34 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
3225
3253
  .gallery-text-label {
3226
3254
  font-weight: 600;
3227
3255
  color: var(--text-muted);
3228
- margin-right: 6px;
3256
+ margin-right: 0.375rem;
3229
3257
  }
3230
3258
 
3231
3259
  .gallery-text-val {
3232
3260
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
3233
- font-size: 12.5px;
3261
+ font-size: 0.7813rem;
3234
3262
  color: var(--text-primary);
3235
3263
  background: rgba(0, 0, 0, 0.05);
3236
- padding: 2px 6px;
3237
- border-radius: 4px;
3264
+ padding: 0.125rem 0.375rem;
3265
+ border-radius: 0.25rem;
3238
3266
  }
3239
3267
 
3240
3268
  .gallery-thumbnails-strip {
3241
3269
  display: flex;
3242
- gap: 8px;
3270
+ gap: 0.5rem;
3243
3271
  overflow-x: auto;
3244
- padding: 6px 2px 4px 2px;
3272
+ padding: 0.375rem 0.125rem 0.25rem 0.125rem;
3245
3273
  }
3246
3274
 
3247
3275
  .gallery-thumb-btn {
3248
3276
  display: inline-flex;
3249
3277
  align-items: center;
3250
- gap: 5px;
3278
+ gap: 0.3125rem;
3251
3279
  background: var(--card-bg);
3252
- border: 1px solid var(--border);
3253
- border-radius: 6px;
3254
- padding: 4px 9px;
3255
- font-size: 11.5px;
3280
+ border: 0.0625rem solid var(--border);
3281
+ border-radius: 0.375rem;
3282
+ padding: 0.25rem 0.5625rem;
3283
+ font-size: 0.7188rem;
3256
3284
  color: var(--text-muted);
3257
3285
  cursor: pointer;
3258
3286
  white-space: nowrap;
@@ -3274,47 +3302,47 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
3274
3302
 
3275
3303
  .thumb-idx {
3276
3304
  background: rgba(0, 0, 0, 0.08);
3277
- border-radius: 4px;
3278
- padding: 1px 4px;
3279
- font-size: 10.5px;
3305
+ border-radius: 0.25rem;
3306
+ padding: 0.0625rem 0.25rem;
3307
+ font-size: 0.6563rem;
3280
3308
  }
3281
3309
 
3282
3310
 
3283
3311
  /* Sanity Execution Details Dashboard */
3284
3312
  .sanity-exec-container {
3285
- margin-top: 16px;
3313
+ margin-top: 1rem;
3286
3314
  display: flex;
3287
3315
  flex-direction: column;
3288
- gap: 16px;
3316
+ gap: 1rem;
3289
3317
  }
3290
3318
 
3291
3319
  .sanity-kpi-grid {
3292
3320
  display: grid;
3293
- grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
3294
- gap: 12px;
3321
+ grid-template-columns: repeat(auto-fit, minmax(11.25rem, 1fr));
3322
+ gap: 0.75rem;
3295
3323
  }
3296
3324
 
3297
3325
  .sanity-kpi-card {
3298
3326
  background: var(--bg-card, #ffffff);
3299
- border: 1px solid var(--border, #e2e8f0);
3300
- border-radius: 10px;
3301
- padding: 14px 16px;
3327
+ border: 0.0625rem solid var(--border, #e2e8f0);
3328
+ border-radius: 0.625rem;
3329
+ padding: 0.875rem 1rem;
3302
3330
  display: flex;
3303
3331
  align-items: center;
3304
- gap: 12px;
3305
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
3332
+ gap: 0.75rem;
3333
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.04);
3306
3334
  transition: transform 0.15s ease, box-shadow 0.15s ease;
3307
3335
  }
3308
3336
 
3309
3337
  .sanity-kpi-card:hover {
3310
- transform: translateY(-1px);
3311
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
3338
+ transform: translateY(-0.0625rem);
3339
+ box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.06);
3312
3340
  }
3313
3341
 
3314
3342
  .sanity-kpi-icon-wrap {
3315
- width: 40px;
3316
- height: 40px;
3317
- border-radius: 8px;
3343
+ width: 2.5rem;
3344
+ height: 2.5rem;
3345
+ border-radius: 0.5rem;
3318
3346
  display: flex;
3319
3347
  align-items: center;
3320
3348
  justify-content: center;
@@ -3344,79 +3372,79 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
3344
3372
  .sanity-kpi-body {
3345
3373
  display: flex;
3346
3374
  flex-direction: column;
3347
- gap: 2px;
3375
+ gap: 0.125rem;
3348
3376
  min-width: 0;
3349
3377
  }
3350
3378
 
3351
3379
  .sanity-kpi-label {
3352
- font-size: 11px;
3380
+ font-size: 0.6875rem;
3353
3381
  font-weight: 600;
3354
3382
  text-transform: uppercase;
3355
- letter-spacing: 0.5px;
3383
+ letter-spacing: 0.0313rem;
3356
3384
  color: var(--text-muted, #64748b);
3357
3385
  }
3358
3386
 
3359
3387
  .sanity-kpi-val {
3360
- font-size: 22px;
3388
+ font-size: 1.375rem;
3361
3389
  font-weight: 700;
3362
3390
  color: var(--foreground, #0f172a);
3363
3391
  line-height: 1.1;
3364
3392
  }
3365
3393
 
3366
3394
  .sanity-kpi-sub {
3367
- font-size: 11px;
3395
+ font-size: 0.6875rem;
3368
3396
  color: var(--text-muted, #94a3b8);
3369
3397
  }
3370
3398
 
3371
3399
  .sanity-steps-section {
3372
3400
  background: var(--bg-card, #ffffff);
3373
- border: 1px solid var(--border, #e2e8f0);
3374
- border-radius: 10px;
3375
- padding: 16px;
3401
+ border: 0.0625rem solid var(--border, #e2e8f0);
3402
+ border-radius: 0.625rem;
3403
+ padding: 1rem;
3376
3404
  }
3377
3405
 
3378
3406
  .sanity-steps-header {
3379
3407
  display: flex;
3380
3408
  align-items: center;
3381
3409
  justify-content: space-between;
3382
- margin-bottom: 12px;
3410
+ margin-bottom: 0.75rem;
3383
3411
  }
3384
3412
 
3385
3413
  .sanity-steps-title {
3386
- font-size: 13px;
3414
+ font-size: 0.8125rem;
3387
3415
  font-weight: 600;
3388
3416
  color: var(--foreground, #0f172a);
3389
3417
  }
3390
3418
 
3391
3419
  .sanity-badge-verified {
3392
- font-size: 11px;
3420
+ font-size: 0.6875rem;
3393
3421
  font-weight: 600;
3394
- padding: 2px 8px;
3395
- border-radius: 9999px;
3422
+ padding: 0.18em 0.73em;
3423
+ border-radius: 999em;
3396
3424
  background: rgba(16, 185, 129, 0.12);
3397
3425
  color: #10B981;
3398
3426
  }
3399
3427
 
3400
3428
  .sanity-pages-grid {
3401
3429
  display: grid;
3402
- grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
3403
- gap: 12px;
3430
+ grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
3431
+ gap: 0.75rem;
3404
3432
  }
3405
3433
 
3406
3434
  .sanity-page-card {
3407
- border: 1px solid var(--border, #e2e8f0);
3408
- border-radius: 8px;
3435
+ border: 0.0625rem solid var(--border, #e2e8f0);
3436
+ border-radius: 0.5rem;
3409
3437
  overflow: hidden;
3410
3438
  background: var(--muted-bg, #f8fafc);
3411
3439
  transition: transform 0.15s ease;
3412
3440
  }
3413
3441
 
3414
3442
  .sanity-page-card:hover {
3415
- transform: translateY(-1px);
3443
+ transform: translateY(-0.0625rem);
3416
3444
  }
3417
3445
 
3418
3446
  .sanity-page-thumb {
3419
- height: 110px;
3447
+ height: 6.875rem;
3420
3448
  background: #0f172a;
3421
3449
  overflow: hidden;
3422
3450
  cursor: pointer;
@@ -3441,21 +3469,21 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
3441
3469
  }
3442
3470
 
3443
3471
  .sanity-page-info {
3444
- padding: 8px 10px;
3472
+ padding: 0.5rem 0.625rem;
3445
3473
  display: flex;
3446
3474
  flex-direction: column;
3447
- gap: 2px;
3475
+ gap: 0.125rem;
3448
3476
  }
3449
3477
 
3450
3478
  .sanity-page-num {
3451
- font-size: 10px;
3479
+ font-size: 0.625rem;
3452
3480
  font-weight: 600;
3453
3481
  color: #5B6EE1;
3454
3482
  text-transform: uppercase;
3455
3483
  }
3456
3484
 
3457
3485
  .sanity-page-name {
3458
- font-size: 12px;
3486
+ font-size: 0.75rem;
3459
3487
  font-weight: 500;
3460
3488
  color: var(--foreground, #0f172a);
3461
3489
  white-space: nowrap;
@@ -3466,30 +3494,30 @@ body .context-image-viewer .viewer .wrapper .image-section .split-view .target-i
3466
3494
  .sanity-footer-action {
3467
3495
  display: flex;
3468
3496
  justify-content: flex-start;
3469
- margin-top: 4px;
3497
+ margin-top: 0.25rem;
3470
3498
  }
3471
3499
 
3472
3500
 
3473
3501
 
3474
3502
  .sanity-dashboard-card {
3475
- padding: 24px;
3503
+ padding: 1.5rem;
3476
3504
  background: var(--bg-card, #ffffff);
3477
- border: 1px solid var(--border, #e2e8f0);
3478
- border-radius: 12px;
3479
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
3505
+ border: 0.0625rem solid var(--border, #e2e8f0);
3506
+ border-radius: 0.75rem;
3507
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05);
3480
3508
  }
3481
3509
  .sanity-dashboard-header {
3482
- margin-bottom: 20px;
3510
+ margin-bottom: 1.25rem;
3483
3511
  }
3484
3512
  .sanity-dashboard-header .title {
3485
- font-size: 18px;
3513
+ font-size: 1.125rem;
3486
3514
  font-weight: 700;
3487
3515
  color: var(--foreground, #0f172a);
3488
3516
  }
3489
3517
  .sanity-dashboard-header .sanity-subtitle {
3490
- font-size: 13px;
3518
+ font-size: 0.8125rem;
3491
3519
  color: var(--text-muted, #64748b);
3492
- margin-top: 4px;
3520
+ margin-top: 0.25rem;
3493
3521
  }
3494
3522
 
3495
3523
  `;
@@ -3575,12 +3603,15 @@ const menuBar = () => `(() => {
3575
3603
  if (DataStore.isSanityRun()) {
3576
3604
  modeLabelEl.textContent = 'Quick Sanity';
3577
3605
  modePillEl.className = 'mode-pill mode-sanity';
3606
+ modePillEl.setAttribute('title', 'Execution Mode: Quick Sanity - Fast preliminary verification of localization and UI readiness');
3578
3607
  } else if (DataStore.isContextRun()) {
3579
3608
  modeLabelEl.textContent = 'Context Creation';
3580
3609
  modePillEl.className = 'mode-pill mode-context';
3610
+ modePillEl.setAttribute('title', 'Execution Mode: Context Creation - Captures strings and builds localization context');
3581
3611
  } else {
3582
3612
  modeLabelEl.textContent = 'i18n Verification';
3583
3613
  modePillEl.className = 'mode-pill mode-i18n';
3614
+ modePillEl.setAttribute('title', 'Execution Mode: i18n Verification - Full end-to-end verification of localized strings and layout');
3584
3615
  }
3585
3616
  }
3586
3617
 
@@ -3591,9 +3622,11 @@ const menuBar = () => `(() => {
3591
3622
  if (hasError) {
3592
3623
  statusPillEl.className = 'status-pill status-failed';
3593
3624
  statusLabelEl.textContent = 'Failed';
3625
+ statusPillEl.setAttribute('title', 'Execution Status: Failed - Errors or failures were encountered during execution');
3594
3626
  } else {
3595
3627
  statusPillEl.className = 'status-pill status-passed';
3596
3628
  statusLabelEl.textContent = 'Passed';
3629
+ statusPillEl.setAttribute('title', 'Execution Status: Passed - All verification checks completed successfully');
3597
3630
  }
3598
3631
  }
3599
3632
 
@@ -3706,7 +3739,7 @@ const overview = () => `//overview content
3706
3739
  if (pageEntries.length > 0) {
3707
3740
  stepsHtml = '<div class="sanity-steps-section">' +
3708
3741
  '<div class="sanity-steps-header">' +
3709
- '<span class="sanity-steps-title">Verified Workflow Steps (' + pageEntries.length + ')</span>' +
3742
+ '<span class="sanity-steps-title">Verified Execution Sequence (' + pageEntries.length + ')</span>' +
3710
3743
  '<span class="sanity-badge-verified">All Steps Passed</span>' +
3711
3744
  '</div>' +
3712
3745
  '<div class="sanity-pages-grid">';
@@ -4118,6 +4151,7 @@ const overview = () => `//overview content
4118
4151
  wrapperEl.appendChild(imageEl);
4119
4152
  wrapperEl.appendChild(nameWrapper);
4120
4153
  wrapperEl.addEventListener('click', () => openContextViewer(idx, valueStates.locale));
4154
+ wrapperEl.addEventListener('dblclick', (e) => e.preventDefault());
4121
4155
  return wrapperEl;
4122
4156
  };
4123
4157
  const createPageTiles = (container) => {
@@ -4129,6 +4163,9 @@ const overview = () => `//overview content
4129
4163
  };
4130
4164
 
4131
4165
  const openContextViewer = (idx, locale) => {
4166
+ if (document.querySelector('.context-image-viewer')) {
4167
+ return;
4168
+ }
4132
4169
  let loaderEl, imageViewerEl, imageViewerMainWrapperEl, imagesSplitViewEl, sourceImageEl, targetImageEl, smartCompareSwitchEl, smartCompareKnobEl, pageCountEl, pageNameEl, zoomInEl, zoomOutEl, disableSmartCompare = false;
4133
4170
  const data = [...entries];
4134
4171
  const pageOpts = [...data.map(d => d[0])];
@@ -4237,7 +4274,7 @@ const overview = () => `//overview content
4237
4274
  const entry = data[valueStates.currentIndex];
4238
4275
  const cursor = fieldStates.zoomLevel > 1 ? fieldStates.dragging.isActive ? 'grabbing' : 'grab' : 'default';
4239
4276
  const css = fieldStates.zoomLevel === 1 ? 'translate(0, 0) scale(1)'
4240
- : \`translate(\${fieldStates.offsets.moveX}px, \${fieldStates.offsets.moveY}px) scale(\${fieldStates.zoomLevel})\`;
4277
+ : \`translate(\${fieldStates.offsets.moveX / 16}rem, \${fieldStates.offsets.moveY / 16}rem) scale(\${fieldStates.zoomLevel})\`;
4241
4278
 
4242
4279
  if(fieldStates.smartCompare) {
4243
4280
  sourceImageEl.parentElement.classList.remove('--hidden');
@@ -4313,6 +4350,8 @@ const overview = () => `//overview content
4313
4350
  const createImageViewer = () => {
4314
4351
  imageViewerEl = document.createElement('div');
4315
4352
  imageViewerEl.classList.add('viewer');
4353
+ imageViewerEl.addEventListener('dblclick', (e) => e.preventDefault());
4354
+ anchorEl.addEventListener('dblclick', (e) => e.preventDefault());
4316
4355
 
4317
4356
  imageViewerMainWrapperEl = document.createElement('div');
4318
4357
  imageViewerMainWrapperEl.classList.add('wrapper');
@@ -4603,6 +4642,7 @@ const overview = () => `//overview content
4603
4642
  };
4604
4643
 
4605
4644
  const startDrag = (event, img) => {
4645
+ event.preventDefault();
4606
4646
  if(fieldStates.zoomLevel === 1) {
4607
4647
  return;
4608
4648
  }
@@ -4688,6 +4728,10 @@ const overview = () => `//overview content
4688
4728
  targetImageWrapper.addEventListener("mousedown", (e) => startDrag(e, 'target'));
4689
4729
  sourceImageWrapper.addEventListener("mouseup", (e) => stopDrag(e, 'source'));
4690
4730
  targetImageWrapper.addEventListener("mouseup", (e) => stopDrag(e, 'target'));
4731
+ sourceImageWrapper.addEventListener("dblclick", (e) => e.preventDefault());
4732
+ targetImageWrapper.addEventListener("dblclick", (e) => e.preventDefault());
4733
+ imagesSplitViewEl.addEventListener("dblclick", (e) => e.preventDefault());
4734
+ imageSectionEl.addEventListener("dblclick", (e) => e.preventDefault());
4691
4735
  document.addEventListener("mousemove", dragMove);
4692
4736
 
4693
4737
  sourceImageWrapper.appendChild(sourceImageEl);
@@ -4715,10 +4759,16 @@ const overview = () => `//overview content
4715
4759
 
4716
4760
  if(DataStore.isContextRun()) {
4717
4761
  title = 'Context Creation Details';
4762
+ const formatVersion = (ts) => {
4763
+ if (!ts) return '';
4764
+ const num = Number(ts);
4765
+ const d = !isNaN(num) && num > 0 ? new Date(num) : new Date(ts);
4766
+ return !isNaN(d.getTime()) ? d.toLocaleString() : ts;
4767
+ };
4718
4768
  info = \`\${window.isStandaloneReport ? 'Created' : 'Imported'} context screenshots for the locales \${DataStore.getLocales().map(locale => {
4719
4769
  const localeStats = DataStore.getStatByLocale(locale);
4720
4770
  return \`<strong>\${locale}</strong>(<em>\${localeStats?.context || 0} contexts</em>, <em>\${localeStats?.reviewed || 0} strings</em>)\`;
4721
- }).join(', ')}\${!window.isStandaloneReport ? \` with version <strong>\${DataStore.getReportFolderTimestamp()}</strong>\` : ''}.\`;
4771
+ }).join(', ')}\${!window.isStandaloneReport ? \` with version <strong>\${formatVersion(DataStore.getReportFolderTimestamp())}</strong>\` : ''}.\`;
4722
4772
  renderPagesSection();
4723
4773
  }
4724
4774
  else {
@@ -4783,8 +4833,8 @@ const overview = () => `//overview content
4783
4833
  const reviewed = overallStats.reviewed;
4784
4834
  const locales = DataStore.getLocales().length;
4785
4835
  const type = {
4786
- I18NED: 'Internationalized',
4787
- NOT_I18NED: 'Not Internationalized',
4836
+ I18NED: 'Localized',
4837
+ NOT_I18NED: 'Not Localized',
4788
4838
  SKIPPED: 'Skipped'
4789
4839
  },
4790
4840
  valueMap = {
@@ -4862,7 +4912,7 @@ const overview = () => `//overview content
4862
4912
  align: 'center',
4863
4913
  floating: true,
4864
4914
  style: {
4865
- fontSize: '14px',
4915
+ fontSize: '0.875rem',
4866
4916
  fontWeight: 'bold'
4867
4917
  }
4868
4918
  },
@@ -4886,7 +4936,7 @@ const overview = () => `//overview content
4886
4936
  yaxis: {
4887
4937
  labels: {
4888
4938
  style: {
4889
- fontSize: '13px'
4939
+ fontSize: '0.8125rem'
4890
4940
  }
4891
4941
  }
4892
4942
  },
@@ -4927,10 +4977,13 @@ const overview = () => `//overview content
4927
4977
  }
4928
4978
  };
4929
4979
 
4930
- (overviewChart = new ApexCharts(
4931
- document.querySelector('.overall-quality .graph'),
4932
- options
4933
- )).render();
4980
+ var overallGraphEl = document.querySelector('.overall-quality .graph');
4981
+ if (overallGraphEl) {
4982
+ (overviewChart = new ApexCharts(
4983
+ overallGraphEl,
4984
+ options
4985
+ )).render();
4986
+ }
4934
4987
  }
4935
4988
 
4936
4989
  function renderStringChart() {
@@ -5146,6 +5199,23 @@ const overview = () => `//overview content
5146
5199
 
5147
5200
  const initialData = getChartData();
5148
5201
 
5202
+ const descMap = {
5203
+ 'Localized': 'Strings verified as fully and correctly translated.',
5204
+ 'Partially Localized': 'Strings with mixed language or partial translation.',
5205
+ 'Not Localized': 'Strings that remain unlocalized in source language.',
5206
+ 'Untranslated': 'Strings missing translation in resource files.',
5207
+ 'Encoding Issue': 'Strings containing garbled characters or charset defects.',
5208
+ 'Ignored': 'Strings explicitly excluded or ignored from localization.',
5209
+ 'Ignored (Covered)': 'Covered portion of ignored strings.',
5210
+ 'Ignored (Skipped)': 'Skipped portion of ignored strings.',
5211
+ 'DNT': 'Do Not Translate items such as brand names & technical keys.',
5212
+ 'DNT (Covered)': 'Covered portion of DNT strings.',
5213
+ 'DNT (Skipped)': 'Skipped portion of DNT strings.',
5214
+ 'User Inputs': 'Dynamic user input fields and variable placeholders.',
5215
+ 'User Inputs (Covered)': 'Covered portion of user inputs.',
5216
+ 'User Inputs (Skipped)': 'Skipped portion of user inputs.'
5217
+ };
5218
+
5149
5219
  const options = {
5150
5220
  series: total === 0 ? [] : initialData.series,
5151
5221
  chart: {
@@ -5193,7 +5263,7 @@ const overview = () => `//overview content
5193
5263
  return Math.round(val) + '%';
5194
5264
  },
5195
5265
  style: {
5196
- fontSize: '11px',
5266
+ fontSize: '0.6875rem',
5197
5267
  fontFamily: 'inherit',
5198
5268
  fontWeight: 700,
5199
5269
  colors: ['#334155']
@@ -5207,7 +5277,7 @@ const overview = () => `//overview content
5207
5277
  align: 'center',
5208
5278
  verticalAlign: 'middle',
5209
5279
  style: {
5210
- fontSize: '13px'
5280
+ fontSize: '0.8125rem'
5211
5281
  }
5212
5282
  },
5213
5283
  labels: initialData.labels,
@@ -5280,17 +5350,6 @@ const overview = () => `//overview content
5280
5350
  }
5281
5351
  }
5282
5352
 
5283
- const descMap = {
5284
- 'Localized': 'Strings verified as fully and correctly translated.',
5285
- 'Partially Localized': 'Strings with mixed language or partial translation.',
5286
- 'Not Localized': 'Strings that remain unlocalized in source language.',
5287
- 'Untranslated': 'Strings missing translation in resource files.',
5288
- 'Encoding Issue': 'Strings containing garbled characters or charset defects.',
5289
- 'Ignored': 'Strings explicitly excluded or ignored from localization.',
5290
- 'DNT': 'Do Not Translate items such as brand names & technical keys.',
5291
- 'User Inputs': 'Dynamic user input fields and variable placeholders.'
5292
- };
5293
-
5294
5353
  // Place regular parameters first, and the 3 expandable dropdown parameters below all other parameters
5295
5354
  const legendItems = [
5296
5355
  { key: 'Localized', label: 'Localized', pct: percentCalc(localized), count: localized, color: '#5B6EE1' },
@@ -5371,22 +5430,24 @@ const overview = () => `//overview content
5371
5430
  const isCovDisabled = disabledSeries.has(item.coveredKey);
5372
5431
  const isSkpDisabled = disabledSeries.has(item.skippedKey);
5373
5432
  const isParentDisabled = disabledSeries.has(item.label) || (isCovDisabled && isSkpDisabled);
5374
- const itemDesc = descMap[item.label] ? ' — ' + descMap[item.label] : '';
5433
+ const itemDesc = descMap[item.label] || item.label;
5375
5434
 
5376
5435
  html += '<div class="legend-row-item is-interactive ' + (item.isExpanded ? 'is-open' : '') + ' ' + (isParentDisabled ? 'inactive' : '') + '" data-category="' + item.id + '">';
5377
- html += ' <div class="interactive-btn-inner" title="' + item.label + ': ' + item.pct + '% (' + item.count + ' strings)' + itemDesc + '">';
5436
+ html += ' <div class="interactive-btn-inner" title="' + itemDesc + '">';
5378
5437
  html += ' <span class="legend-circle-dot" style="background: ' + item.color + '"></span>';
5379
5438
  html += ' <span class="legend-row-label">' + item.label + ' <span class="legend-row-pct">(' + item.pct + '%)</span></span>';
5380
5439
  html += ' <svg class="chevron-icon ' + (item.isExpanded ? 'is-open' : '') + '" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>';
5381
5440
  html += ' </div>';
5382
5441
 
5383
5442
  if (item.isExpanded) {
5443
+ const covDesc = descMap[item.coveredKey] || ('Covered portion of ' + item.label + '.');
5444
+ const skpDesc = descMap[item.skippedKey] || ('Skipped portion of ' + item.label + '.');
5384
5445
  html += ' <div class="split-dropdown-menu">';
5385
- html += ' <div class="dropdown-item ' + (isCovDisabled ? 'inactive' : '') + '" data-series="' + item.coveredKey + '" title="' + item.label + ' Covered: ' + item.coveredPct + '% (' + item.coveredCount + ' strings) — Covered portion of ' + item.label + '">';
5446
+ html += ' <div class="dropdown-item ' + (isCovDisabled ? 'inactive' : '') + '" data-series="' + item.coveredKey + '" title="' + covDesc + '">';
5386
5447
  html += ' <div class="dropdown-item-left"><span class="dot" style="background:' + item.coveredColor + '"></span><span class="dropdown-item-label">Covered</span></div>';
5387
5448
  html += ' <span class="dropdown-item-val">' + item.coveredPct + '%</span>';
5388
5449
  html += ' </div>';
5389
- html += ' <div class="dropdown-item ' + (isSkpDisabled ? 'inactive' : '') + '" data-series="' + item.skippedKey + '" title="' + item.label + ' Skipped: ' + item.skippedPct + '% (' + item.skippedCount + ' strings) — Skipped portion of ' + item.label + '">';
5450
+ html += ' <div class="dropdown-item ' + (isSkpDisabled ? 'inactive' : '') + '" data-series="' + item.skippedKey + '" title="' + skpDesc + '">';
5390
5451
  html += ' <div class="dropdown-item-left"><span class="dot" style="background:' + item.skippedColor + '"></span><span class="dropdown-item-label">Skipped</span></div>';
5391
5452
  html += ' <span class="dropdown-item-val">' + item.skippedPct + '%</span>';
5392
5453
  html += ' </div>';
@@ -5395,8 +5456,8 @@ const overview = () => `//overview content
5395
5456
  html += '</div>';
5396
5457
  } else {
5397
5458
  const isDisabled = disabledSeries.has(item.key);
5398
- const itemDesc = descMap[item.key] ? ' — ' + descMap[item.key] : '';
5399
- html += '<div class="legend-row-item is-clickable ' + (isDisabled ? 'inactive' : '') + '" data-series="' + item.key + '" title="' + item.label + ': ' + item.pct + '% (' + item.count + ' strings)' + itemDesc + '">';
5459
+ const itemDesc = descMap[item.key] || item.label;
5460
+ html += '<div class="legend-row-item is-clickable ' + (isDisabled ? 'inactive' : '') + '" data-series="' + item.key + '" title="' + itemDesc + '">';
5400
5461
  html += ' <span class="legend-circle-dot" style="background: ' + item.color + '"></span>';
5401
5462
  html += ' <span class="legend-row-label">' + item.label + ' <span class="legend-row-pct">(' + item.pct + '%)</span></span>';
5402
5463
  html += '</div>';
@@ -5497,11 +5558,11 @@ const overview = () => `//overview content
5497
5558
  options = {
5498
5559
  series: [
5499
5560
  {
5500
- name: 'Internationalized',
5561
+ name: 'Localized',
5501
5562
  data: [numericI18n, currencyI18n, percentageI18n]
5502
5563
  },
5503
5564
  {
5504
- name: 'Not Internationalized',
5565
+ name: 'Not Localized',
5505
5566
  data: [numericNotI18n, currencyNotI18n, percentageNotI18n]
5506
5567
  }
5507
5568
  ],
@@ -5532,7 +5593,7 @@ const overview = () => `//overview content
5532
5593
  offsetY: -14,
5533
5594
  dropShadow: { enabled: false },
5534
5595
  style: {
5535
- fontSize: '10px',
5596
+ fontSize: '0.625rem',
5536
5597
  fontWeight: 600,
5537
5598
  colors: ['var(--foreground, #334155)']
5538
5599
  },
@@ -5579,7 +5640,7 @@ const overview = () => `//overview content
5579
5640
  rotateAlways: false,
5580
5641
  hideOverlappingLabels: false,
5581
5642
  style: {
5582
- fontSize: '11px',
5643
+ fontSize: '0.6875rem',
5583
5644
  fontFamily: 'inherit',
5584
5645
  fontWeight: 500,
5585
5646
  colors: 'var(--foreground, #334155)'
@@ -5593,7 +5654,7 @@ const overview = () => `//overview content
5593
5654
  labels: {
5594
5655
  formatter: (v) => v + '%',
5595
5656
  style: {
5596
- fontSize: '10px',
5657
+ fontSize: '0.625rem',
5597
5658
  fontFamily: 'inherit',
5598
5659
  colors: 'var(--text-muted, #64748b)'
5599
5660
  }
@@ -5604,7 +5665,7 @@ const overview = () => `//overview content
5604
5665
  position: 'top',
5605
5666
  horizontalAlign: 'center',
5606
5667
  offsetY: 0,
5607
- fontSize: '11px',
5668
+ fontSize: '0.6875rem',
5608
5669
  labels: {
5609
5670
  colors: 'var(--foreground, #334155)'
5610
5671
  },
@@ -5624,7 +5685,7 @@ const overview = () => `//overview content
5624
5685
  highlightDataSeries: true
5625
5686
  },
5626
5687
  formatter: (seriesName) => {
5627
- if (seriesName === 'Internationalized') {
5688
+ if (seriesName === 'Localized') {
5628
5689
  return seriesName + ' (' + i18nPercentage + '%)';
5629
5690
  }
5630
5691
  return seriesName + ' (' + nonI18nPercentage + '%)';
@@ -5679,11 +5740,11 @@ const overview = () => `//overview content
5679
5740
  options = {
5680
5741
  series: [
5681
5742
  {
5682
- name: 'Internationalized',
5743
+ name: 'Localized',
5683
5744
  data: [dateI18n, timeI18n, dateTimeI18n]
5684
5745
  },
5685
5746
  {
5686
- name: 'Not Internationalized',
5747
+ name: 'Not Localized',
5687
5748
  data: [dateNotI18n, timeNotI18n, dateTimeNotI18n]
5688
5749
  }
5689
5750
  ],
@@ -5714,7 +5775,7 @@ const overview = () => `//overview content
5714
5775
  offsetY: -14,
5715
5776
  dropShadow: { enabled: false },
5716
5777
  style: {
5717
- fontSize: '10px',
5778
+ fontSize: '0.625rem',
5718
5779
  fontWeight: 600,
5719
5780
  colors: ['var(--foreground, #334155)']
5720
5781
  },
@@ -5761,7 +5822,7 @@ const overview = () => `//overview content
5761
5822
  rotateAlways: false,
5762
5823
  hideOverlappingLabels: false,
5763
5824
  style: {
5764
- fontSize: '11px',
5825
+ fontSize: '0.6875rem',
5765
5826
  fontFamily: 'inherit',
5766
5827
  fontWeight: 500,
5767
5828
  colors: 'var(--foreground, #334155)'
@@ -5775,7 +5836,7 @@ const overview = () => `//overview content
5775
5836
  labels: {
5776
5837
  formatter: (v) => v + '%',
5777
5838
  style: {
5778
- fontSize: '10px',
5839
+ fontSize: '0.625rem',
5779
5840
  fontFamily: 'inherit',
5780
5841
  colors: 'var(--text-muted, #64748b)'
5781
5842
  }
@@ -5786,7 +5847,7 @@ const overview = () => `//overview content
5786
5847
  position: 'top',
5787
5848
  horizontalAlign: 'center',
5788
5849
  offsetY: 0,
5789
- fontSize: '11px',
5850
+ fontSize: '0.6875rem',
5790
5851
  labels: {
5791
5852
  colors: 'var(--foreground, #334155)'
5792
5853
  },
@@ -5806,7 +5867,7 @@ const overview = () => `//overview content
5806
5867
  highlightDataSeries: true
5807
5868
  },
5808
5869
  formatter: (seriesName) => {
5809
- if (seriesName === 'Internationalized') {
5870
+ if (seriesName === 'Localized') {
5810
5871
  return seriesName + ' (' + i18nPercentage + '%)';
5811
5872
  }
5812
5873
  return seriesName + ' (' + nonI18nPercentage + '%)';
@@ -5841,21 +5902,21 @@ const insight = () => `// insights content
5841
5902
  }
5842
5903
 
5843
5904
  var METRIC_ROWS = [
5844
- { label: 'Internationlized Strings', key: 'localizedStrings', type: 'STRING_LOCALIZED', category: 'Strings', color: 'green' },
5845
- { label: 'Not Internationlized Strings', key: 'notLocalizedStrings', type: 'STRING_NOT_LOCALIZED', category: 'Strings', color: 'red', isDefect: true },
5905
+ { label: 'Localized Strings', key: 'localizedStrings', type: 'STRING_LOCALIZED', category: 'Strings', color: 'green' },
5906
+ { label: 'Not Localized Strings', key: 'notLocalizedStrings', type: 'STRING_NOT_LOCALIZED', category: 'Strings', color: 'red', isDefect: true },
5846
5907
  { label: 'Partially Localized Strings', key: 'partialStrings', type: 'STRING_PARTIALLY_LOCALIZED', category: 'Strings', color: 'yellow', isWarning: true },
5847
- { label: 'Internationalized Numeric', key: 'localizedNumber', type: 'NUMBER_LOCALIZED', category: 'Numeric', color: 'green' },
5848
- { label: 'Not Internationalized Numeric', key: 'notLocalizedNumber', type: 'NUMBER_NOT_LOCALIZED', category: 'Numeric', color: 'red', isDefect: true },
5849
- { label: 'Internationlized Currency', key: 'localizedCurrency', type: 'CURRENCY_LOCALIZED', category: 'Currency', color: 'green' },
5850
- { label: 'Not Internationlized Currency', key: 'notLocalizedCurrency', type: 'CURRENCY_NOT_LOCALIZED', category: 'Currency', color: 'red', isDefect: true },
5851
- { label: 'Internationlized Percentage', key: 'localizedPercentage', type: 'PERCENTAGE_LOCALIZED', category: 'Percentage', color: 'green' },
5852
- { label: 'Not Internationlized Percentage', key: 'notLocalizedPercentage', type: 'PERCENTAGE_NOT_LOCALIZED', category: 'Percentage', color: 'red', isDefect: true },
5853
- { label: 'Internationlized Date', key: 'localizedDate', type: 'DATE_LOCALIZED', category: 'Date', color: 'green' },
5854
- { label: 'Not Internationlized Date', key: 'notLocalizedDate', type: 'DATE_NOT_LOCALIZED', category: 'Date', color: 'red', isDefect: true },
5855
- { label: 'Internationlized Time', key: 'localizedTime', type: 'TIME_LOCALIZED', category: 'Time', color: 'green' },
5856
- { label: 'Not Internationlized Time', key: 'notLocalizedTime', type: 'TIME_NOT_LOCALIZED', category: 'Time', color: 'red', isDefect: true },
5857
- { label: 'Internationlized DateTime', key: 'localizedDateTime', type: 'DATE_TIME_LOCALIZED', category: 'DateTime', color: 'green' },
5858
- { label: 'Not Internationlized DateTime', key: 'notLocalizedDateTime', type: 'DATE_TIME_NOT_LOCALIZED', category: 'DateTime', color: 'red', isDefect: true },
5908
+ { label: 'Localized Numeric', key: 'localizedNumber', type: 'NUMBER_LOCALIZED', category: 'Numeric', color: 'green' },
5909
+ { label: 'Not Localized Numeric', key: 'notLocalizedNumber', type: 'NUMBER_NOT_LOCALIZED', category: 'Numeric', color: 'red', isDefect: true },
5910
+ { label: 'Localized Currency', key: 'localizedCurrency', type: 'CURRENCY_LOCALIZED', category: 'Currency', color: 'green' },
5911
+ { label: 'Not Localized Currency', key: 'notLocalizedCurrency', type: 'CURRENCY_NOT_LOCALIZED', category: 'Currency', color: 'red', isDefect: true },
5912
+ { label: 'Localized Percentage', key: 'localizedPercentage', type: 'PERCENTAGE_LOCALIZED', category: 'Percentage', color: 'green' },
5913
+ { label: 'Not Localized Percentage', key: 'notLocalizedPercentage', type: 'PERCENTAGE_NOT_LOCALIZED', category: 'Percentage', color: 'red', isDefect: true },
5914
+ { label: 'Localized Date', key: 'localizedDate', type: 'DATE_LOCALIZED', category: 'Date', color: 'green' },
5915
+ { label: 'Not Localized Date', key: 'notLocalizedDate', type: 'DATE_NOT_LOCALIZED', category: 'Date', color: 'red', isDefect: true },
5916
+ { label: 'Localized Time', key: 'localizedTime', type: 'TIME_LOCALIZED', category: 'Time', color: 'green' },
5917
+ { label: 'Not Localized Time', key: 'notLocalizedTime', type: 'TIME_NOT_LOCALIZED', category: 'Time', color: 'red', isDefect: true },
5918
+ { label: 'Localized DateTime', key: 'localizedDateTime', type: 'DATE_TIME_LOCALIZED', category: 'DateTime', color: 'green' },
5919
+ { label: 'Not Localized DateTime', key: 'notLocalizedDateTime', type: 'DATE_TIME_NOT_LOCALIZED', category: 'DateTime', color: 'red', isDefect: true },
5859
5920
  { label: 'Encoding Issue Strings', key: 'encoding', type: 'ENCODING_ISSUE', category: 'Defects', color: 'cyan', isDefect: true },
5860
5921
  { label: 'DNT Strings', key: 'dnt', type: 'DNT', category: 'Skipped', color: 'muted' },
5861
5922
  { label: 'Ignored Strings', key: 'ignored', type: 'IGNORE', category: 'Skipped', color: 'muted' },
@@ -6067,7 +6128,7 @@ const insight = () => `// insights content
6067
6128
 
6068
6129
  var locales = DataStore.getLocales();
6069
6130
  if (!locales.length) {
6070
- tbody.innerHTML = '<tr><td colspan="3" style="text-align:center; padding: 24px; color: var(--text-muted);">No locale data available</td></tr>';
6131
+ tbody.innerHTML = '<tr><td colspan="3" style="text-align:center; padding: 1.5rem; color: var(--text-muted);">No locale data available</td></tr>';
6071
6132
  return;
6072
6133
  }
6073
6134
 
@@ -6670,7 +6731,7 @@ window.getProductUrl = function() {
6670
6731
  var params = new URLSearchParams(location.href.match(/(\\?.*$)/g)?.[0] || "");
6671
6732
  window.isStandaloneReport = params.size ? (params.get("standalone") === "true") : true;
6672
6733
  `;
6673
- const log = () => '(() => {\n document.addEventListener("DOMContentLoaded", function() {\n var rawLog = window.logData || (DataStore.hasRuntimeError() ? "We are facing internal issue. Please try again after sometime." : "No log data found!");\n var logLinesEl = document.getElementById("logLines");\n var copyBtn = document.getElementById("copyLogBtn");\n var searchInput = document.getElementById("logSearchInput");\n var wrapToggleBtn = document.getElementById("wrapToggleBtn");\n var levelPills = document.querySelectorAll(".log-level-btn");\n\n var statTotal = document.getElementById("logStatTotal");\n var statInfo = document.getElementById("logStatInfo");\n var statWarn = document.getElementById("logStatWarn");\n var statError = document.getElementById("logStatError");\n\n var activeLevel = "ALL";\n var activeSearch = "";\n var isWrapped = false;\n var currentFilteredText = rawLog;\n\n var parsedLines = [];\n var countInfo = 0;\n var countWarn = 0;\n var countError = 0;\n\n var rawLines = rawLog.split("\\n");\n for (var i = 0; i < rawLines.length; i++) {\n var line = rawLines[i];\n var level = "LOG";\n if (line.indexOf("[ERROR]") !== -1) {\n level = "ERROR";\n countError++;\n } else if (line.indexOf("[WARN]") !== -1) {\n level = "WARN";\n countWarn++;\n } else if (line.indexOf("[INFO]") !== -1) {\n level = "INFO";\n countInfo++;\n }\n parsedLines.push({\n num: i + 1,\n level: level,\n text: line\n });\n }\n\n if (statTotal) statTotal.textContent = "Total: " + parsedLines.length;\n if (statInfo) statInfo.textContent = "Info: " + countInfo;\n if (statWarn) statWarn.textContent = "Warn: " + countWarn;\n if (statError) statError.textContent = "Error: " + countError;\n\n function escapeHtml(str) {\n return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");\n }\n\n function renderLogs() {\n if (!logLinesEl) return;\n\n var filtered = parsedLines.filter(function(item) {\n if (activeLevel !== "ALL" && item.level !== activeLevel) {\n return false;\n }\n if (activeSearch && item.text.toLowerCase().indexOf(activeSearch.toLowerCase()) === -1) {\n return false;\n }\n return true;\n });\n\n currentFilteredText = filtered.map(function(item) { return item.text; }).join("\\n");\n\n if (filtered.length === 0) {\n logLinesEl.innerHTML = "<div class=\\"log-empty-state\\">No matching log entries found.</div>";\n return;\n }\n\n var html = "";\n for (var j = 0; j < filtered.length; j++) {\n var item = filtered[j];\n var escaped = escapeHtml(item.text);\n\n if (activeSearch) {\n var safeTerm = activeSearch.split("").map(function(ch) {\n return ".*+?^$()|[]{}".indexOf(ch) !== -1 ? "\\\\" + ch : ch;\n }).join("");\n try {\n var reg = new RegExp("(" + safeTerm + ")", "gi");\n escaped = escaped.replace(reg, "<mark class=\\"log-highlight\\">$1</mark>");\n } catch(e) {}\n }\n\n escaped = escaped.replace(/\\[INFO\\]/g, "<span class=\\"log-badge badge-info\\">INFO</span>");\n escaped = escaped.replace(/\\[WARN\\]/g, "<span class=\\"log-badge badge-warn\\">WARN</span>");\n escaped = escaped.replace(/\\[ERROR\\]/g, "<span class=\\"log-badge badge-error\\">ERROR</span>");\n\n var rowClass = "log-row";\n if (item.level === "ERROR") rowClass += " row-error";\n else if (item.level === "WARN") rowClass += " row-warn";\n\n html += "<div class=\\"" + rowClass + "\\">" +\n "<span class=\\"log-ln\\">" + item.num + "</span>" +\n "<div class=\\"log-msg\\">" + escaped + "</div>" +\n "</div>";\n }\n\n logLinesEl.innerHTML = html;\n }\n\n renderLogs();\n\n levelPills.forEach(function(btn) {\n btn.addEventListener("click", function() {\n levelPills.forEach(function(b) { b.classList.remove("active"); });\n btn.classList.add("active");\n activeLevel = btn.dataset.level || "ALL";\n renderLogs();\n });\n });\n\n if (searchInput) {\n searchInput.addEventListener("input", function(e) {\n activeSearch = e.target.value.trim();\n renderLogs();\n });\n }\n\n if (wrapToggleBtn) {\n wrapToggleBtn.addEventListener("click", function() {\n isWrapped = !isWrapped;\n if (isWrapped) {\n logLinesEl.classList.add("wrapped");\n wrapToggleBtn.classList.add("active");\n } else {\n logLinesEl.classList.remove("wrapped");\n wrapToggleBtn.classList.remove("active");\n }\n });\n }\n\n if (copyBtn) {\n var showCopied = function() {\n 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>";\n setTimeout(function() {\n 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>";\n }, 2000);\n };\n\n var fallbackCopy = function(text) {\n var textArea = document.createElement("textarea");\n textArea.value = text;\n textArea.style.position = "fixed";\n textArea.style.top = "-9999px";\n textArea.style.left = "-9999px";\n textArea.style.opacity = "0";\n textArea.setAttribute("readonly", "");\n document.body.appendChild(textArea);\n textArea.focus();\n textArea.select();\n textArea.setSelectionRange(0, textArea.value.length);\n try {\n var successful = document.execCommand("copy");\n document.body.removeChild(textArea);\n if (successful) showCopied();\n } catch (err) {\n document.body.removeChild(textArea);\n }\n };\n\n copyBtn.addEventListener("click", function() {\n var textToCopy = currentFilteredText || rawLog;\n if (navigator.clipboard && typeof navigator.clipboard.writeText === "function") {\n navigator.clipboard.writeText(textToCopy).then(showCopied).catch(function() {\n fallbackCopy(textToCopy);\n });\n } else {\n fallbackCopy(textToCopy);\n }\n });\n }\n });\n})();';
6734
+ const log = () => '(() => {\n document.addEventListener("DOMContentLoaded", function() {\n var rawLog = window.logData || (DataStore.hasRuntimeError() ? "We are facing internal issue. Please try again after sometime." : "No log data found!");\n var logLinesEl = document.getElementById("logLines");\n var copyBtn = document.getElementById("copyLogBtn");\n var searchInput = document.getElementById("logSearchInput");\n var wrapToggleBtn = document.getElementById("wrapToggleBtn");\n var levelPills = document.querySelectorAll(".log-level-btn");\n\n var statTotal = document.getElementById("logStatTotal");\n var statInfo = document.getElementById("logStatInfo");\n var statWarn = document.getElementById("logStatWarn");\n var statError = document.getElementById("logStatError");\n\n var activeLevel = "ALL";\n var activeSearch = "";\n var isWrapped = false;\n var currentFilteredText = rawLog;\n\n var parsedLines = [];\n var countInfo = 0;\n var countWarn = 0;\n var countError = 0;\n\n var rawLines = rawLog.split("\\n");\n for (var i = 0; i < rawLines.length; i++) {\n var line = rawLines[i];\n var level = "LOG";\n if (line.indexOf("[ERROR]") !== -1) {\n level = "ERROR";\n countError++;\n } else if (line.indexOf("[WARN]") !== -1) {\n level = "WARN";\n countWarn++;\n } else if (line.indexOf("[INFO]") !== -1) {\n level = "INFO";\n countInfo++;\n }\n parsedLines.push({\n num: i + 1,\n level: level,\n text: line\n });\n }\n\n if (statTotal) statTotal.textContent = "Total: " + parsedLines.length;\n if (statInfo) statInfo.textContent = "Info: " + countInfo;\n if (statWarn) statWarn.textContent = "Warn: " + countWarn;\n if (statError) statError.textContent = "Error: " + countError;\n\n function escapeHtml(str) {\n return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");\n }\n\n function renderLogs() {\n if (!logLinesEl) return;\n\n var filtered = parsedLines.filter(function(item) {\n if (activeLevel !== "ALL" && item.level !== activeLevel) {\n return false;\n }\n if (activeSearch && item.text.toLowerCase().indexOf(activeSearch.toLowerCase()) === -1) {\n return false;\n }\n return true;\n });\n\n currentFilteredText = filtered.map(function(item) { return item.text; }).join("\\n");\n\n if (filtered.length === 0) {\n logLinesEl.innerHTML = "<div class=\\"log-empty-state\\">No matching log entries found.</div>";\n return;\n }\n\n var html = "";\n for (var j = 0; j < filtered.length; j++) {\n var item = filtered[j];\n var escaped = escapeHtml(item.text);\n\n if (activeSearch) {\n var safeTerm = activeSearch.split("").map(function(ch) {\n return ".*+?^$()|[]{}".indexOf(ch) !== -1 ? "\\\\" + ch : ch;\n }).join("");\n try {\n var reg = new RegExp("(" + safeTerm + ")", "gi");\n escaped = escaped.replace(reg, "<mark class=\\"log-highlight\\">$1</mark>");\n } catch(e) {}\n }\n\n escaped = escaped.replace(/\\[INFO\\]/g, "<span class=\\"log-badge badge-info\\">INFO</span>");\n escaped = escaped.replace(/\\[WARN\\]/g, "<span class=\\"log-badge badge-warn\\">WARN</span>");\n escaped = escaped.replace(/\\[ERROR\\]/g, "<span class=\\"log-badge badge-error\\">ERROR</span>");\n\n var rowClass = "log-row";\n if (item.level === "ERROR") rowClass += " row-error";\n else if (item.level === "WARN") rowClass += " row-warn";\n\n html += "<div class=\\"" + rowClass + "\\">" +\n "<span class=\\"log-ln\\">" + item.num + "</span>" +\n "<div class=\\"log-msg\\">" + escaped + "</div>" +\n "</div>";\n }\n\n logLinesEl.innerHTML = html;\n }\n\n renderLogs();\n\n levelPills.forEach(function(btn) {\n btn.addEventListener("click", function() {\n levelPills.forEach(function(b) { b.classList.remove("active"); });\n btn.classList.add("active");\n activeLevel = btn.dataset.level || "ALL";\n renderLogs();\n });\n });\n\n if (searchInput) {\n searchInput.addEventListener("input", function(e) {\n activeSearch = e.target.value.trim();\n renderLogs();\n });\n }\n\n if (wrapToggleBtn) {\n wrapToggleBtn.addEventListener("click", function() {\n isWrapped = !isWrapped;\n if (isWrapped) {\n logLinesEl.classList.add("wrapped");\n wrapToggleBtn.classList.add("active");\n } else {\n logLinesEl.classList.remove("wrapped");\n wrapToggleBtn.classList.remove("active");\n }\n });\n }\n\n if (copyBtn) {\n var showCopied = function() {\n 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>";\n setTimeout(function() {\n 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>";\n }, 2000);\n };\n\n var fallbackCopy = function(text) {\n var textArea = document.createElement("textarea");\n textArea.value = text;\n textArea.style.position = "fixed";\n textArea.style.top = "-100vh";\n textArea.style.left = "-100vw";\n textArea.style.opacity = "0";\n textArea.setAttribute("readonly", "");\n document.body.appendChild(textArea);\n textArea.focus();\n textArea.select();\n textArea.setSelectionRange(0, textArea.value.length);\n try {\n var successful = document.execCommand("copy");\n document.body.removeChild(textArea);\n if (successful) showCopied();\n } catch (err) {\n document.body.removeChild(textArea);\n }\n };\n\n copyBtn.addEventListener("click", function() {\n var textToCopy = currentFilteredText || rawLog;\n if (navigator.clipboard && typeof navigator.clipboard.writeText === "function") {\n navigator.clipboard.writeText(textToCopy).then(showCopied).catch(function() {\n fallbackCopy(textToCopy);\n });\n } else {\n fallbackCopy(textToCopy);\n }\n });\n }\n });\n})();';
6674
6735
  const getJsData = (metaData) => `${global()}
6675
6736
  ${data(metaData)}
6676
6737
  ${menuBar()}
@@ -7903,7 +7964,7 @@ class NightWatchDriver extends BaseDriver {
7903
7964
  await this.$driver.execute(
7904
7965
  (el2, color2) => {
7905
7966
  const oldBorder = window.getComputedStyle(el2).border;
7906
- el2.style.border = `3px solid ${color2}`;
7967
+ el2.style.border = `0.1875rem solid ${color2}`;
7907
7968
  setTimeout(() => {
7908
7969
  el2.style.border = oldBorder;
7909
7970
  }, 40);
@@ -8073,7 +8134,7 @@ class WebDriverIoDriver extends BaseDriver {
8073
8134
  await this.$driver.execute(
8074
8135
  (el2, color2) => {
8075
8136
  const oldBorder = window.getComputedStyle(el2).border;
8076
- el2.style.border = `3px solid ${color2}`;
8137
+ el2.style.border = `0.1875rem solid ${color2}`;
8077
8138
  setTimeout(() => {
8078
8139
  el2.style.border = oldBorder;
8079
8140
  }, 40);