From ad3a4f38774d17b3b78d61f479fd716afdf30541 Mon Sep 17 00:00:00 2001
From: CODEX <codex@nodedc.local>
Date: Sat, 20 Jun 2026 21:55:23 +0300
Subject: [PATCH] Refine BIM glass theming and panel scroll layout

---
 frontend/dcViewer.css            | 103 +++++++++++------
 frontend/dcViewer.js             |   4 +-
 frontend/index.html              | 182 +++++++++++++++++++++----------
 frontend/src/ui/settingsMenu.js  | 117 +++++++++++++++++---
 frontend/src/ui/templatesMenu.js |  14 ++-
 5 files changed, 307 insertions(+), 113 deletions(-)

diff --git a/frontend/dcViewer.css b/frontend/dcViewer.css
index 36d8dcd..a940cc6 100644
--- a/frontend/dcViewer.css
+++ b/frontend/dcViewer.css
@@ -68,11 +68,11 @@
   --comment-target-passive: #f5f5fa;
   --comment-target-passive-alpha: 0.58;
   --comment-target-passive-size: 22px;
-  --nodedc-header-dropdown-bg: rgba(11, 11, 14, 0.94);
-  --nodedc-header-dropdown-item-bg: rgba(42, 42, 46, 0.74);
-  --nodedc-header-dropdown-item-hover-bg: rgba(42, 42, 46, 0.86);
-  --nodedc-header-dropdown-item-active-bg: rgba(47, 47, 52, 0.96);
-  --nodedc-header-dropdown-item-active-color: #ffffff;
+  --nodedc-header-dropdown-bg: var(--nodedc-glass-panel-bg-strong);
+  --nodedc-header-dropdown-item-bg: var(--nodedc-glass-control-bg);
+  --nodedc-header-dropdown-item-hover-bg: var(--nodedc-glass-control-hover);
+  --nodedc-header-dropdown-item-active-bg: var(--toolbar-bg-active);
+  --nodedc-header-dropdown-item-active-color: var(--toolbar-bg-active-contrast);
   --nodedc-glass-panel-bg: rgba(28, 28, 30, 0.72);
   --nodedc-glass-panel-bg-strong: rgba(28, 28, 30, 0.82);
   --nodedc-glass-panel-bg-soft: rgba(28, 28, 30, 0.56);
@@ -398,17 +398,17 @@ header {
   bottom: 12px;
   width: 320px;
   max-height: calc(100vh - 90px);
-  overflow: auto;
+  overflow: hidden;
   background: var(--nodedc-glass-panel-surface);
   border: 1px solid var(--nodedc-glass-outline);
   border-radius: var(--modal-radius, 16px);
-  padding: 12px;
+  padding: 0;
   box-shadow: var(--nodedc-glass-panel-shadow);
   backdrop-filter: var(--nodedc-glass-filter);
   -webkit-backdrop-filter: var(--nodedc-glass-filter);
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 0;
   z-index: 11;
   display: none;
 }
@@ -418,8 +418,7 @@ header {
 }
 
 .inspector-panel-header {
-  position: sticky;
-  top: -12px;
+  position: relative;
   z-index: 5;
   flex: 0 0 auto;
   display: grid;
@@ -428,9 +427,9 @@ header {
   gap: 10px;
   height: calc(var(--env-control-h) + 20px);
   min-height: var(--env-control-h);
-  margin: -12px -12px 0;
+  margin: 0;
   padding: 12px 12px 8px 16px;
-  background: var(--nodedc-glass-panel-surface-strong);
+  background: transparent;
   border-radius: var(--modal-radius, 16px) var(--modal-radius, 16px) 0 0;
   color: var(--text);
   font-weight: 700;
@@ -443,6 +442,16 @@ header {
   line-height: 1.2;
 }
 
+.inspector-panel-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  padding: 0 12px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
 .inspector-collapse-btn {
   display: grid;
   place-items: center;
@@ -561,16 +570,16 @@ header {
 }
 
 .comments-panel-header {
-  position: sticky;
-  top: 0;
+  position: relative;
   z-index: 5;
+  flex: 0 0 auto;
   display: grid;
   grid-template-columns: minmax(0, 1fr) var(--env-control-h);
   align-items: center;
   gap: 10px;
   min-height: calc(var(--env-control-h) + 20px);
   padding: 12px 12px 8px 16px;
-  background: var(--nodedc-glass-panel-surface-strong);
+  background: transparent;
   border-radius: var(--modal-radius, 16px) var(--modal-radius, 16px) 0 0;
   color: var(--text);
   font-weight: 700;
@@ -590,6 +599,7 @@ header {
 }
 
 .comments-panel-body {
+  flex: 1 1 auto;
   min-height: 0;
   overflow: auto;
   padding: 0 12px 12px;
@@ -1323,13 +1333,14 @@ header {
   background: var(--nodedc-glass-panel-surface);
   border: 1px solid var(--nodedc-glass-outline);
   border-radius: var(--modal-radius, 14px);
-  padding: 12px;
-  display: grid;
-  gap: 10px;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
   width: var(--templates-width, 280px);
   min-height: 200px;
   max-height: 420px;
-  overflow: auto;
+  overflow: hidden;
   box-shadow: var(--nodedc-glass-panel-shadow);
   z-index: 20;
   backdrop-filter: var(--nodedc-glass-filter);
@@ -1341,23 +1352,32 @@ header {
 }
 
 .templates-panel .templates-header {
-  position: sticky;
-  top: -12px;
+  position: relative;
   z-index: 5;
+  flex: 0 0 auto;
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
   gap: 10px;
   height: calc(var(--env-control-h) + 20px);
   min-height: var(--env-control-h);
-  margin: -12px -12px 0;
+  margin: 0;
   padding: 12px 12px 8px 16px;
   border-radius: var(--modal-radius, 14px) var(--modal-radius, 14px) 0 0;
-  background: var(--nodedc-glass-panel-surface-strong);
+  background: transparent;
   color: var(--text);
   font-weight: 700;
 }
 
+.templates-panel .templates-panel-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  padding: 0 12px 12px;
+  display: grid;
+  gap: 10px;
+}
+
 .templates-panel .templates-title {
   font-size: 13px;
   line-height: 1.2;
@@ -1530,6 +1550,8 @@ header {
   width: var(--templates-width, 280px);
   max-width: min(var(--templates-width, 350px), calc(100vw - 32px));
   padding: 12px;
+  gap: 10px;
+  overflow: auto;
   z-index: 40;
 }
 
@@ -2376,13 +2398,14 @@ header {
   background: var(--nodedc-glass-panel-surface);
   border: 1px solid var(--nodedc-glass-outline);
   border-radius: var(--modal-radius, 14px);
-  padding: 12px;
-  display: grid;
-  gap: 10px;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
   width: var(--settings-width, 350px);
   min-height: 420px;
   max-height: min(720px, calc(100vh - 72px));
-  overflow: auto;
+  overflow: hidden;
   box-shadow: var(--nodedc-glass-panel-shadow);
   z-index: 22;
   font-size: 12px;
@@ -2391,9 +2414,9 @@ header {
 }
 
 .settings-panel .settings-header {
-  position: sticky;
-  top: -12px;
+  position: relative;
   z-index: 5;
+  flex: 0 0 auto;
   display: grid;
   grid-template-columns: minmax(0, 1fr) var(--env-control-h);
   align-items: center;
@@ -2402,12 +2425,21 @@ header {
   font-weight: 700;
   height: calc(var(--env-control-h) + 20px);
   min-height: var(--env-control-h);
-  margin: -12px -12px 0;
+  margin: 0;
   padding: 12px 12px 8px 16px;
-  background: var(--nodedc-glass-panel-surface-strong);
+  background: transparent;
   border-radius: var(--modal-radius, 14px) var(--modal-radius, 14px) 0 0;
 }
 
+.settings-panel .settings-panel-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  padding: 0 12px 12px;
+  display: grid;
+  gap: 10px;
+}
+
 .settings-panel .settings-title {
   font-size: 13px;
   line-height: 1.2;
@@ -3120,13 +3152,14 @@ body[data-viewer-mode="guest"] .inspector-restore-tray {
   background: var(--nodedc-glass-panel-surface);
   border: 1px solid var(--nodedc-glass-outline);
   border-radius: var(--modal-radius, 14px);
-  padding: 10px;
-  display: grid;
-  gap: 10px;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
   width: var(--templates-width, 280px);
   min-height: 200px;
   max-height: 420px;
-  overflow: auto;
+  overflow: hidden;
   box-shadow: var(--nodedc-glass-panel-shadow);
   z-index: 20;
   backdrop-filter: var(--nodedc-glass-filter);
diff --git a/frontend/dcViewer.js b/frontend/dcViewer.js
index c745897..c667507 100644
--- a/frontend/dcViewer.js
+++ b/frontend/dcViewer.js
@@ -3,8 +3,8 @@ const SDK_URL = "./lib/dc-camera-context.es.js?v=3";
 
 import { createLogo } from "./src/ui/logo.js";
 import { toolbarConfig, applyToolbarVars } from "./src/ui/toolbar.js";
-import { createTemplatesMenu } from "./src/ui/templatesMenu.js?v=2";
-import { createSettingsMenu } from "./src/ui/settingsMenu.js?v=9";
+import { createTemplatesMenu } from "./src/ui/templatesMenu.js?v=3";
+import { createSettingsMenu } from "./src/ui/settingsMenu.js?v=11";
 import { createMeasurementModal } from "./src/ui/measurementModal.js";
 import { createGlassSelect } from "./src/ui/glassSelect.js";
 import { createSliderControl } from "./src/ui/controls/slider.js";
diff --git a/frontend/index.html b/frontend/index.html
index 0ba7f3f..358318d 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -64,6 +64,69 @@
           const lum = 0.2126 * toLinear(rgb[0]) + 0.7152 * toLinear(rgb[1]) + 0.0722 * toLinear(rgb[2]);
           return (lum + 0.05) / 0.05 >= 1.05 / (lum + 0.05) ? "#15170f" : "#f5f5fa";
         };
+        const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+        const colorParts = (value, fallback) => {
+          const parsed = parseColor(value);
+          if (parsed && parsed.every((channel) => Number.isFinite(channel))) return parsed;
+          const parsedFallback = parseColor(fallback);
+          if (parsedFallback && parsedFallback.every((channel) => Number.isFinite(channel))) return parsedFallback;
+          return [28, 28, 28];
+        };
+        const alphaValue = (value, fallback) => {
+          const numeric = Number(value);
+          return Number.isFinite(numeric) ? clamp(numeric, 0, 1) : fallback;
+        };
+        const rgba = (parts, alpha) => {
+          const [r, g, b] = parts.map((channel) => Math.round(clamp(channel, 0, 255)));
+          return `rgba(${r}, ${g}, ${b}, ${clamp(alpha, 0, 1).toFixed(3)})`;
+        };
+        const applyGlassSettings = () => {
+          const panelColor = colorParts(s.modalBg, "#1c1c1c");
+          const focusColor = colorParts(s.modalFocus, "#292929");
+          const controlColor = colorParts(s.modalElement, s.modalFocus || "#262626");
+          const outlineColor = colorParts(s.modalBorder, s.modalElementOutline || "#1c1c1c");
+          const controlOutlineColor = colorParts(s.modalElementOutline, s.modalBorder || "#262626");
+          const modalBgAlpha = alphaValue(s.modalBgAlpha, 1);
+          const modalFocusAlpha = alphaValue(s.modalFocusAlpha, 0.35);
+          const panelAlpha = clamp(0.24 + modalBgAlpha * 0.48, 0.32, 0.88);
+          const panelStrongAlpha = clamp(panelAlpha + 0.1, 0.42, 0.92);
+          const panelSoftAlpha = clamp(panelAlpha - 0.16, 0.2, 0.72);
+          const sectionAlpha = clamp(modalFocusAlpha * 0.6, 0.04, 0.42);
+          const controlAlpha = clamp(0.12 + modalFocusAlpha * 0.9, 0.16, 0.66);
+          const controlHoverAlpha = clamp(controlAlpha + 0.08, 0.22, 0.74);
+          const outlineAlpha = clamp(0.055 + modalFocusAlpha * 0.18, 0.065, 0.2);
+          const controlOutlineAlpha = clamp(0.045 + modalFocusAlpha * 0.12, 0.055, 0.16);
+
+          const panelBg = rgba(panelColor, panelAlpha);
+          const panelBgStrong = rgba(panelColor, panelStrongAlpha);
+          const panelBgSoft = rgba(panelColor, panelSoftAlpha);
+          const sectionBg = rgba(focusColor, sectionAlpha);
+          const outline = rgba(outlineColor, outlineAlpha);
+          const outlineBright = rgba(outlineColor, clamp(outlineAlpha + 0.05, 0.08, 0.26));
+          const outlineMid = rgba(outlineColor, clamp(outlineAlpha + 0.015, 0.07, 0.22));
+          const outlineDim = rgba(outlineColor, clamp(outlineAlpha * 0.62, 0.04, 0.16));
+          const controlBg = rgba(controlColor, controlAlpha);
+          const controlHover = rgba(focusColor, controlHoverAlpha);
+          const controlShadow = rgba(controlOutlineColor, controlOutlineAlpha);
+
+          set("--nodedc-glass-panel-bg", panelBg);
+          set("--nodedc-glass-panel-bg-strong", panelBgStrong);
+          set("--nodedc-glass-panel-bg-soft", panelBgSoft);
+          set("--nodedc-glass-panel-surface", `linear-gradient(180deg, rgba(255, 255, 255, 0.052) 0%, rgba(255, 255, 255, 0.014) 100%), ${panelBg}`);
+          set("--nodedc-glass-panel-surface-strong", `linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.016) 100%), ${panelBgStrong}`);
+          set("--nodedc-glass-section-bg", `linear-gradient(180deg, rgba(255, 255, 255, 0.038) 0%, rgba(255, 255, 255, 0.01) 100%), ${sectionBg}`);
+          set("--nodedc-glass-outline", outline);
+          set("--nodedc-glass-outline-gradient", `linear-gradient(180deg, ${outlineBright} 0%, ${outlineMid} 56%, ${outlineDim} 100%)`);
+          set("--nodedc-glass-panel-shadow", `inset 0 1px 0 ${outlineDim}, 0 22px 72px rgba(0, 0, 0, 0.42)`);
+          set("--nodedc-glass-control-bg", `linear-gradient(180deg, rgba(255, 255, 255, 0.052) 0%, rgba(255, 255, 255, 0.018) 100%), ${controlBg}`);
+          set("--nodedc-glass-control-hover", `linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.026) 100%), ${controlHover}`);
+          set("--nodedc-glass-control-shadow", `inset 0 1px 0 ${controlShadow}`);
+          set("--nodedc-header-dropdown-bg", panelBgStrong);
+          set("--nodedc-header-dropdown-item-bg", controlBg);
+          set("--nodedc-header-dropdown-item-hover-bg", controlHover);
+          set("--nodedc-header-dropdown-item-active-bg", s.toolbarBgActive);
+          set("--nodedc-header-dropdown-item-active-color", s.toolbarBgActive ? readableTextColor(s.toolbarBgActive) : undefined);
+        };
         set("--bg-outer", s.bgOuter);
         set("--canvas-top", s.canvasTop);
         set("--canvas-bottom", s.canvasBottom);
@@ -88,6 +151,7 @@
         set("--modal-element", s.modalElement);
         set("--modal-element-outline", s.modalElementOutline);
         set("--modal-radius", s.modalRadius);
+        applyGlassSettings();
         set("--project-btn-fill", s.projectBtnFill);
         set("--project-btn-border", s.projectBtnBorder);
         set("--project-btn-hover", s.projectBtnHover);
@@ -134,7 +198,7 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="./dcViewer.css?v=30">
+  <link rel="stylesheet" href="./dcViewer.css?v=32">
 </head>
 <body>
   <header>
@@ -186,68 +250,70 @@
           </svg>
         </button>
       </div>
-      <div class="panel-section inspector-main-section">
-        <div id="treeContainer" class="tree"></div>
-        <div class="inspector-controls">
-          <div class="inspector-control-row inspector-control-row--half" id="displayModeControl">
-            <div class="inspector-control-label">Режим отображения</div>
-            <div class="inspector-select-host" id="displayModeSelect"></div>
+      <div class="inspector-panel-body">
+        <div class="panel-section inspector-main-section">
+          <div id="treeContainer" class="tree"></div>
+          <div class="inspector-controls">
+            <div class="inspector-control-row inspector-control-row--half" id="displayModeControl">
+              <div class="inspector-control-label">Режим отображения</div>
+              <div class="inspector-select-host" id="displayModeSelect"></div>
+            </div>
+            <div class="inspector-control-row inspector-control-row--half" id="lightingModeControl">
+              <div class="inspector-control-label">Свет</div>
+              <div class="inspector-select-host" id="lightingModeSelect"></div>
+            </div>
+            <div class="inspector-control-row inspector-control-row--full" id="navigationAxisControl">
+              <div class="inspector-control-label">Ось навигации</div>
+              <div class="inspector-select-host" id="navigationAxisSelect"></div>
+            </div>
+            <div class="inspector-control-row inspector-control-row--full inspector-control-row--slider" id="zoomSpeedControl"></div>
           </div>
-          <div class="inspector-control-row inspector-control-row--half" id="lightingModeControl">
-            <div class="inspector-control-label">Свет</div>
-            <div class="inspector-select-host" id="lightingModeSelect"></div>
+        </div>
+        <div class="panel-section" id="projectNameSection">
+          <h3>Название проекта</h3>
+          <input type="text" id="projectNameInput" class="project-name-input" placeholder="Проект" autocomplete="off">
+          <div class="error-text inline-error" id="projectNameError"></div>
+        </div>
+        <div class="panel-section">
+          <h3>Глобальные координаты</h3>
+          <div class="muted" style="margin-bottom:6px;">Центр выделения (мировые)</div>
+          <div class="transform-grid">
+            <label>X <input type="text" id="globalX"></label>
+            <label>Y <input type="text" id="globalY"></label>
+            <label>Z <input type="text" id="globalZ"></label>
           </div>
-          <div class="inspector-control-row inspector-control-row--full" id="navigationAxisControl">
-            <div class="inspector-control-label">Ось навигации</div>
-            <div class="inspector-select-host" id="navigationAxisSelect"></div>
+        </div>
+        <div class="panel-section">
+          <h3>Трансформации</h3>
+          <div class="muted" style="margin-bottom:6px;">Перемещение</div>
+          <div class="transform-grid">
+            <label>X <input type="text" id="posX"></label>
+            <label>Y <input type="text" id="posY"></label>
+            <label>Z <input type="text" id="posZ"></label>
           </div>
-          <div class="inspector-control-row inspector-control-row--full inspector-control-row--slider" id="zoomSpeedControl"></div>
+          <div class="muted" style="margin:8px 0 6px;">Вращение (deg)</div>
+          <div class="transform-grid">
+            <label>X <input type="text" id="rotX"></label>
+            <label>Y <input type="text" id="rotY"></label>
+            <label>Z <input type="text" id="rotZ"></label>
+          </div>
+          <div class="muted" style="margin:8px 0 6px;">Масштаб</div>
+          <div class="transform-grid">
+            <label>X <input type="text" id="scaleX"></label>
+            <label>Y <input type="text" id="scaleY"></label>
+            <label>Z <input type="text" id="scaleZ"></label>
+          </div>
+          <small id="transformHint" class="muted">Выберите объект в инспекторе или сцене, чтобы редактировать.</small>
         </div>
-      </div>
-      <div class="panel-section" id="projectNameSection">
-        <h3>Название проекта</h3>
-        <input type="text" id="projectNameInput" class="project-name-input" placeholder="Проект" autocomplete="off">
-        <div class="error-text inline-error" id="projectNameError"></div>
-      </div>
-      <div class="panel-section">
-        <h3>Глобальные координаты</h3>
-        <div class="muted" style="margin-bottom:6px;">Центр выделения (мировые)</div>
-        <div class="transform-grid">
-          <label>X <input type="text" id="globalX"></label>
-          <label>Y <input type="text" id="globalY"></label>
-          <label>Z <input type="text" id="globalZ"></label>
+        <div class="panel-section">
+          <h3>Журнал</h3>
+          <div id="logList" class="log"></div>
         </div>
-      </div>
-      <div class="panel-section">
-        <h3>Трансформации</h3>
-        <div class="muted" style="margin-bottom:6px;">Перемещение</div>
-        <div class="transform-grid">
-          <label>X <input type="text" id="posX"></label>
-          <label>Y <input type="text" id="posY"></label>
-          <label>Z <input type="text" id="posZ"></label>
+        <div class="panel-section" id="saveProjectSection">
+          <button class="secondary-btn model-settings-btn" id="saveModelSettingsButton" type="button">Сохранить настройки</button>
+          <button class="primary-btn" id="saveProjectButton" type="button">Сохранить проект</button>
+          <button class="secondary-btn danger-btn" id="deleteProjectButton" type="button">Удалить проект</button>
         </div>
-        <div class="muted" style="margin:8px 0 6px;">Вращение (deg)</div>
-        <div class="transform-grid">
-          <label>X <input type="text" id="rotX"></label>
-          <label>Y <input type="text" id="rotY"></label>
-          <label>Z <input type="text" id="rotZ"></label>
-        </div>
-        <div class="muted" style="margin:8px 0 6px;">Масштаб</div>
-        <div class="transform-grid">
-          <label>X <input type="text" id="scaleX"></label>
-          <label>Y <input type="text" id="scaleY"></label>
-          <label>Z <input type="text" id="scaleZ"></label>
-        </div>
-        <small id="transformHint" class="muted">Выберите объект в инспекторе или сцене, чтобы редактировать.</small>
-      </div>
-      <div class="panel-section">
-        <h3>Журнал</h3>
-        <div id="logList" class="log"></div>
-      </div>
-      <div class="panel-section" id="saveProjectSection">
-        <button class="secondary-btn model-settings-btn" id="saveModelSettingsButton" type="button">Сохранить настройки</button>
-        <button class="primary-btn" id="saveProjectButton" type="button">Сохранить проект</button>
-        <button class="secondary-btn danger-btn" id="deleteProjectButton" type="button">Удалить проект</button>
       </div>
     </aside>
     <div class="inspector-restore-tray" id="inspectorRestoreTray" hidden>
@@ -570,6 +636,6 @@
   <input id="fileInput" class="hidden" type="file"
          accept=".xkt,.glb,.gltf,.bim,.las,.laz,.obj,.stl">
 
-  <script type="module" src="./dcViewer.js?v=43"></script>
+  <script type="module" src="./dcViewer.js?v=45"></script>
 </body>
 </html>
diff --git a/frontend/src/ui/settingsMenu.js b/frontend/src/ui/settingsMenu.js
index 5016438..0ca4e5e 100644
--- a/frontend/src/ui/settingsMenu.js
+++ b/frontend/src/ui/settingsMenu.js
@@ -102,6 +102,92 @@ const readableTextColor = (value) => {
   return (lum + 0.05) / 0.05 >= 1.05 / (lum + 0.05) ? "#15170f" : "#f5f5fa";
 };
 
+const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+
+const colorParts = (value, fallback) => {
+  const parsed = parseColor(value);
+  if (parsed && parsed.every((channel) => Number.isFinite(channel))) return parsed;
+  const parsedFallback = parseColor(fallback);
+  if (parsedFallback && parsedFallback.every((channel) => Number.isFinite(channel))) return parsedFallback;
+  return [28, 28, 28];
+};
+
+const alphaValue = (value, fallback) => {
+  const numeric = Number(value);
+  return Number.isFinite(numeric) ? clamp(numeric, 0, 1) : fallback;
+};
+
+const rgba = (parts, alpha) => {
+  const [r, g, b] = parts.map((channel) => Math.round(clamp(channel, 0, 255)));
+  return `rgba(${r}, ${g}, ${b}, ${clamp(alpha, 0, 1).toFixed(3)})`;
+};
+
+const applyGlassSettings = (root, s) => {
+  const panelColor = colorParts(s.modalBg, defaultSettings.modalBg);
+  const focusColor = colorParts(s.modalFocus, defaultSettings.modalFocus);
+  const controlColor = colorParts(s.modalElement, s.modalFocus || defaultSettings.modalElement);
+  const outlineColor = colorParts(s.modalBorder, s.modalElementOutline || defaultSettings.modalBorder);
+  const controlOutlineColor = colorParts(s.modalElementOutline, s.modalBorder || defaultSettings.modalElementOutline);
+  const modalBgAlpha = alphaValue(s.modalBgAlpha, defaultSettings.modalBgAlpha);
+  const modalFocusAlpha = alphaValue(s.modalFocusAlpha, defaultSettings.modalFocusAlpha);
+  const panelAlpha = clamp(0.24 + modalBgAlpha * 0.48, 0.32, 0.88);
+  const panelStrongAlpha = clamp(panelAlpha + 0.1, 0.42, 0.92);
+  const panelSoftAlpha = clamp(panelAlpha - 0.16, 0.2, 0.72);
+  const sectionAlpha = clamp(modalFocusAlpha * 0.6, 0.04, 0.42);
+  const controlAlpha = clamp(0.12 + modalFocusAlpha * 0.9, 0.16, 0.66);
+  const controlHoverAlpha = clamp(controlAlpha + 0.08, 0.22, 0.74);
+  const outlineAlpha = clamp(0.055 + modalFocusAlpha * 0.18, 0.065, 0.2);
+  const controlOutlineAlpha = clamp(0.045 + modalFocusAlpha * 0.12, 0.055, 0.16);
+
+  const panelBg = rgba(panelColor, panelAlpha);
+  const panelBgStrong = rgba(panelColor, panelStrongAlpha);
+  const panelBgSoft = rgba(panelColor, panelSoftAlpha);
+  const sectionBg = rgba(focusColor, sectionAlpha);
+  const outline = rgba(outlineColor, outlineAlpha);
+  const outlineBright = rgba(outlineColor, clamp(outlineAlpha + 0.05, 0.08, 0.26));
+  const outlineMid = rgba(outlineColor, clamp(outlineAlpha + 0.015, 0.07, 0.22));
+  const outlineDim = rgba(outlineColor, clamp(outlineAlpha * 0.62, 0.04, 0.16));
+  const controlBg = rgba(controlColor, controlAlpha);
+  const controlHover = rgba(focusColor, controlHoverAlpha);
+  const controlShadow = rgba(controlOutlineColor, controlOutlineAlpha);
+
+  root.style.setProperty("--nodedc-glass-panel-bg", panelBg);
+  root.style.setProperty("--nodedc-glass-panel-bg-strong", panelBgStrong);
+  root.style.setProperty("--nodedc-glass-panel-bg-soft", panelBgSoft);
+  root.style.setProperty(
+    "--nodedc-glass-panel-surface",
+    `linear-gradient(180deg, rgba(255, 255, 255, 0.052) 0%, rgba(255, 255, 255, 0.014) 100%), ${panelBg}`
+  );
+  root.style.setProperty(
+    "--nodedc-glass-panel-surface-strong",
+    `linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.016) 100%), ${panelBgStrong}`
+  );
+  root.style.setProperty(
+    "--nodedc-glass-section-bg",
+    `linear-gradient(180deg, rgba(255, 255, 255, 0.038) 0%, rgba(255, 255, 255, 0.01) 100%), ${sectionBg}`
+  );
+  root.style.setProperty("--nodedc-glass-outline", outline);
+  root.style.setProperty(
+    "--nodedc-glass-outline-gradient",
+    `linear-gradient(180deg, ${outlineBright} 0%, ${outlineMid} 56%, ${outlineDim} 100%)`
+  );
+  root.style.setProperty("--nodedc-glass-panel-shadow", `inset 0 1px 0 ${outlineDim}, 0 22px 72px rgba(0, 0, 0, 0.42)`);
+  root.style.setProperty(
+    "--nodedc-glass-control-bg",
+    `linear-gradient(180deg, rgba(255, 255, 255, 0.052) 0%, rgba(255, 255, 255, 0.018) 100%), ${controlBg}`
+  );
+  root.style.setProperty(
+    "--nodedc-glass-control-hover",
+    `linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.026) 100%), ${controlHover}`
+  );
+  root.style.setProperty("--nodedc-glass-control-shadow", `inset 0 1px 0 ${controlShadow}`);
+  root.style.setProperty("--nodedc-header-dropdown-bg", panelBgStrong);
+  root.style.setProperty("--nodedc-header-dropdown-item-bg", controlBg);
+  root.style.setProperty("--nodedc-header-dropdown-item-hover-bg", controlHover);
+  root.style.setProperty("--nodedc-header-dropdown-item-active-bg", s.toolbarBgActive);
+  root.style.setProperty("--nodedc-header-dropdown-item-active-color", readableTextColor(s.toolbarBgActive));
+};
+
 const applySettings = (s) => {
   const root = document.documentElement;
   root.style.setProperty("--bg-outer", s.bgOuter);
@@ -137,6 +223,7 @@ const applySettings = (s) => {
   root.style.setProperty("--modal-element", s.modalElement);
   root.style.setProperty("--modal-element-outline", s.modalElementOutline);
   root.style.setProperty("--modal-radius", s.modalRadius);
+  applyGlassSettings(root, s);
   root.style.setProperty("--border", s.border);
   root.style.setProperty("--text", s.text);
   root.style.setProperty("--panel", s.panel);
@@ -259,6 +346,10 @@ export function createSettingsMenu({ panel, controls = {}, onChange = null, onSh
     header.appendChild(closeBtn);
     panel.appendChild(header);
 
+    const body = document.createElement("div");
+    body.className = "settings-panel-body";
+    panel.appendChild(body);
+
     const section = (title) => {
       const box = document.createElement("div");
       box.className = "settings-section";
@@ -357,7 +448,7 @@ export function createSettingsMenu({ panel, controls = {}, onChange = null, onSh
     addColor(font, "Фон холста низ", "canvasBottom");
     addColor(font, "Фон загрузки верх", "loadingTop");
     addColor(font, "Фон загрузки низ", "loadingBottom");
-    panel.appendChild(font);
+    body.appendChild(font);
 
     const buttons = section("Кнопки");
     addColor(buttons, "Плюс", "plus");
@@ -374,26 +465,26 @@ export function createSettingsMenu({ panel, controls = {}, onChange = null, onSh
       step: 1,
       formatValue: (val) => `${Math.round(val)}%`,
     });
-    panel.appendChild(buttons);
+    body.appendChild(buttons);
 
     const projectButtons = section("Кнопки проектов");
     addColor(projectButtons, "Проекты (заливка)", "projectBtnFill");
     addColor(projectButtons, "Проекты (бордер)", "projectBtnBorder");
     addColor(projectButtons, "Проекты (hover)", "projectBtnHover");
-    panel.appendChild(projectButtons);
+    body.appendChild(projectButtons);
 
     const modalButtons = section("Кнопки модалок");
     addColor(modalButtons, "Модальная primary", "modalBtnPrimary");
     addColor(modalButtons, "Модальная secondary", "modalBtnSecondary");
     addColor(modalButtons, "Лоудер", "loaderColor");
-    panel.appendChild(modalButtons);
+    body.appendChild(modalButtons);
 
     const toolbar = section("Toolbar");
     addColor(toolbar, "Фон", "toolbarBg");
     addColor(toolbar, "Актив", "toolbarBgActive");
     addColor(toolbar, "Бордер", "toolbarBorder");
     addColor(toolbar, "Outline", "toolbarOutline");
-    panel.appendChild(toolbar);
+    body.appendChild(toolbar);
 
     const navCube = section("NavCube");
     addColor(navCube, "Грани", "navCubeBase");
@@ -412,7 +503,7 @@ export function createSettingsMenu({ panel, controls = {}, onChange = null, onSh
         setVal("navCubeEdgeAlpha", Math.max(0, Math.min(1, Number(val) / 100)));
       },
     });
-    panel.appendChild(navCube);
+    body.appendChild(navCube);
 
     const sectionCut = section("Разрез / сечение");
     addColor(sectionCut, "Ось X", "sectionAxisX");
@@ -468,7 +559,7 @@ export function createSettingsMenu({ panel, controls = {}, onChange = null, onSh
         setVal("sectionPlaneEdgeAlpha", Math.max(0, Math.min(1, Number(val) / 100)));
       },
     });
-    panel.appendChild(sectionCut);
+    body.appendChild(sectionCut);
 
     const commentTargets = section("Таргеты комментариев");
     addColor(commentTargets, "Активный: цвет", "commentTargetActiveColor");
@@ -521,14 +612,14 @@ export function createSettingsMenu({ panel, controls = {}, onChange = null, onSh
         setVal("commentTargetPassiveSize", Math.max(12, Math.min(48, Math.round(Number(val)))));
       },
     });
-    panel.appendChild(commentTargets);
+    body.appendChild(commentTargets);
 
     const measure = section("Линейка");
     addColor(measure, "Линия/бордер", "measureLine");
     addColor(measure, "Плашка", "measureLabel");
     addColor(measure, "Текст плашки", "measureLabelText");
     addColor(measure, "Кружок", "measureDot");
-    panel.appendChild(measure);
+    body.appendChild(measure);
 
     const viewport = section("Viewport");
     const addCheck = (label, checked, handler) => {
@@ -548,7 +639,7 @@ export function createSettingsMenu({ panel, controls = {}, onChange = null, onSh
     if (controls.toggleEdges) addCheck("Рёбра", controls.toggleEdges.checked, (v) => { controls.toggleEdges.checked = v; controls.toggleEdges.dispatchEvent(new Event("change")); });
     if (controls.toggleTransparent) addCheck("Прозрачный фон", controls.toggleTransparent.checked, (v) => { controls.toggleTransparent.checked = v; controls.toggleTransparent.dispatchEvent(new Event("change")); });
     if (controls.addMode) addCheck("Добавлять в сцену", controls.addMode.checked, (v) => { controls.addMode.checked = v; });
-    panel.appendChild(viewport);
+    body.appendChild(viewport);
 
     const modals = section("Модальные окна");
     addColor(modals, "Основной фон", "modalBg");
@@ -598,18 +689,18 @@ export function createSettingsMenu({ panel, controls = {}, onChange = null, onSh
         setVal("modalRadius", val);
       },
     });
-    panel.appendChild(modals);
+    body.appendChild(modals);
 
     const cube = section("Выделение объектов");
     addColor(cube, "Подсветка объектов", "highlight");
-    panel.appendChild(cube);
+    body.appendChild(cube);
   };
 
   const show = () => {
     render();
     if (panel) {
       panel.classList.remove("hidden");
-      panel.style.display = "grid";
+      panel.style.display = "flex";
     }
     onShow?.();
   };
diff --git a/frontend/src/ui/templatesMenu.js b/frontend/src/ui/templatesMenu.js
index 4df5350..a4438ac 100644
--- a/frontend/src/ui/templatesMenu.js
+++ b/frontend/src/ui/templatesMenu.js
@@ -89,11 +89,15 @@ export function createTemplatesMenu({ panel, fetchProjects, openProject, onShow,
     header.appendChild(actions);
     panel.appendChild(header);
 
+    const body = document.createElement("div");
+    body.className = "templates-panel-body";
+    panel.appendChild(body);
+
     if (state.loading) {
       const loadingEl = document.createElement("div");
       loadingEl.className = "templates-empty";
       loadingEl.textContent = "Загрузка списка проектов...";
-      panel.appendChild(loadingEl);
+      body.appendChild(loadingEl);
       return;
     }
 
@@ -102,11 +106,11 @@ export function createTemplatesMenu({ panel, fetchProjects, openProject, onShow,
       errorEl.className = "templates-empty";
       errorEl.style.color = "var(--error)";
       errorEl.textContent = state.error;
-      panel.appendChild(errorEl);
+      body.appendChild(errorEl);
     }
 
-    panel.appendChild(renderSection("Шаблоны", state.templates, "Нет шаблонов"));
-    panel.appendChild(renderSection("Мои проекты", state.projects, "Нет сохранённых проектов"));
+    body.appendChild(renderSection("Шаблоны", state.templates, "Нет шаблонов"));
+    body.appendChild(renderSection("Мои проекты", state.projects, "Нет сохранённых проектов"));
   };
 
   const load = async () => {
@@ -137,7 +141,7 @@ export function createTemplatesMenu({ panel, fetchProjects, openProject, onShow,
     render();
     if (panel) {
       panel.classList.remove("hidden");
-      panel.style.display = "grid";
+      panel.style.display = "flex";
     }
     load();
     onShow?.();