From e4f7c167ebd70f5ebc079beac5a5e98ebb37008d Mon Sep 17 00:00:00 2001
From: Maxim Dolgolyov <maxim.dolgolyov@gmail.com>
Date: Tue, 14 Apr 2026 14:14:37 +0300
Subject: [PATCH] =?UTF-8?q?refactor:=20=D0=BF=D0=B5=D1=80=D0=B5=D1=80?=
 =?UTF-8?q?=D0=B0=D0=B1=D0=BE=D1=82=D0=B0=D0=BD=D0=B0=20=D0=BF=D0=B0=D0=BD?=
 =?UTF-8?q?=D0=B5=D0=BB=D1=8C=20=D1=81=D1=82=D0=B5=D1=80=D0=B5=D0=BE=D0=BC?=
 =?UTF-8?q?=D0=B5=D1=82=D1=80=D0=B8=D0=B8=20=E2=80=94=20=D0=B8=D0=BA=D0=BE?=
 =?UTF-8?q?=D0=BD=D0=BA=D0=B8,=20toggle-=D1=80=D1=8F=D0=B4=D1=8B,=20steppe?=
 =?UTF-8?q?r=20=D0=B4=D0=BB=D1=8F=20n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/lab.html | 469 ++++++++++++++++++++++++++++++++++------------
 1 file changed, 351 insertions(+), 118 deletions(-)

diff --git a/frontend/lab.html b/frontend/lab.html
index fa2a280..92f6466 100644
--- a/frontend/lab.html
+++ b/frontend/lab.html
@@ -247,8 +247,102 @@
     .stereo-fig-btn.active, .stereo-toggle.active, .stereo-sect-btn.active, .stereo-sect-type.active {
       border-color: var(--violet) !important; color: var(--violet) !important; background: rgba(155,93,229,.1) !important;
     }
-    #stereo-unfold-btn.active, #stereo-measure-btn.active, #stereo-inscribed-btn.active, #stereo-circumscribed-btn.active {
-      border-color: var(--violet) !important; color: var(--violet) !important; background: rgba(155,93,229,.1) !important;
+
+    /* stereo panel redesign */
+    .stereo-panel {
+      width: 230px; flex-shrink: 0;
+      background: var(--surface);
+      border-right: 1.5px solid var(--border);
+      display: flex; flex-direction: column;
+      overflow-y: auto; padding: 10px 10px;
+    }
+    .stereo-fig-grid {
+      display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
+      margin-bottom: 4px;
+    }
+    .st-fig-btn {
+      display: flex; align-items: center; gap: 5px;
+      padding: 6px 8px; border-radius: 9px;
+      border: 1.5px solid var(--border);
+      background: transparent; color: var(--text-2);
+      font-family: 'Manrope', sans-serif; font-size: 0.68rem; font-weight: 700;
+      cursor: pointer; transition: all .13s; white-space: nowrap; overflow: hidden;
+    }
+    .st-fig-btn svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 2; flex-shrink: 0; fill: none; }
+    .st-fig-btn:hover { border-color: rgba(155,93,229,.4); color: var(--violet); background: rgba(155,93,229,.06); }
+    .st-fig-btn.active { border-color: var(--violet); color: var(--violet); background: rgba(155,93,229,.12); }
+    .st-fig-btn-wide { grid-column: span 2; }
+
+    .st-tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin-bottom: 4px; }
+    .st-tool-btn {
+      display: flex; align-items: center; gap: 5px;
+      padding: 6px 8px; border-radius: 9px;
+      border: 1.5px solid var(--border);
+      background: transparent; color: var(--text-2);
+      font-family: 'Manrope', sans-serif; font-size: 0.68rem; font-weight: 700;
+      cursor: pointer; transition: all .13s; white-space: nowrap; overflow: hidden;
+    }
+    .st-tool-btn svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; flex-shrink: 0; fill: none; }
+    .st-tool-btn:hover { border-color: rgba(155,93,229,.4); color: var(--violet); background: rgba(155,93,229,.06); }
+    .st-tool-btn.active { border-color: var(--violet); color: var(--violet); background: rgba(155,93,229,.12); }
+    .st-tool-btn-wide { grid-column: span 2; }
+
+    .st-action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin-bottom: 2px; }
+    .st-action-btn {
+      padding: 5px 6px; border-radius: 8px;
+      border: 1px solid var(--border);
+      background: transparent; color: rgba(255,255,255,.45);
+      font-family: 'Manrope', sans-serif; font-size: 0.65rem; font-weight: 600;
+      cursor: pointer; transition: all .13s; text-align: center;
+    }
+    .st-action-btn:hover { border-color: rgba(239,71,111,.4); color: #ef476f; background: rgba(239,71,111,.06); }
+
+    .st-toggle-row {
+      display: flex; align-items: center; justify-content: space-between;
+      padding: 4px 2px; cursor: pointer; transition: background .13s; border-radius: 7px;
+    }
+    .st-toggle-row:hover { background: rgba(255,255,255,.03); }
+    .st-toggle-label {
+      font-size: 0.7rem; font-weight: 600; color: var(--text-2);
+      display: flex; align-items: center; gap: 5px;
+    }
+    .st-toggle-label svg { width: 11px; height: 11px; stroke: currentColor; stroke-width: 2; opacity: .6; fill: none; }
+    .st-toggle {
+      width: 26px; height: 14px; border-radius: 7px;
+      background: rgba(255,255,255,.1); border: 1.5px solid var(--border-h);
+      position: relative; transition: background .15s; flex-shrink: 0; cursor: pointer;
+    }
+    .st-toggle::after {
+      content: ''; position: absolute; left: 2px; top: 50%;
+      transform: translateY(-50%);
+      width: 8px; height: 8px; border-radius: 50%;
+      background: rgba(255,255,255,.4); transition: all .15s;
+    }
+    .st-toggle.on { background: var(--violet); border-color: var(--violet); }
+    .st-toggle.on::after { left: calc(100% - 10px); background: #fff; }
+
+    .st-n-ctrl {
+      display: flex; align-items: center; gap: 5px;
+      border: 1.5px solid var(--border); border-radius: 9px;
+      padding: 4px 6px;
+    }
+    .st-n-btn {
+      width: 20px; height: 20px; border-radius: 5px;
+      border: 1px solid var(--border-h);
+      background: transparent; color: var(--text-2);
+      cursor: pointer; display: flex; align-items: center; justify-content: center;
+      transition: background .12s;
+    }
+    .st-n-btn svg { width: 11px; height: 11px; stroke: currentColor; }
+    .st-n-btn:hover { background: rgba(155,93,229,.1); }
+    .st-n-val { font-size: 0.75rem; font-weight: 700; color: var(--text); min-width: 14px; text-align: center; }
+    .st-n-label { font-size: 0.68rem; color: var(--text-3); flex: 1; }
+    #stereo-unfold-btn.active, #stereo-measure-btn.active,
+    #stereo-point-btn.active, #stereo-connect-btn.active,
+    #stereo-mark-tick-btn.active, #stereo-mark-par-btn.active,
+    #stereo-derive-mid-btn.active, #stereo-derive-fc-btn.active, #stereo-derive-alt-btn.active, #stereo-derive-cen-btn.active,
+    #stereo-angle-edge-btn.active, #stereo-angle-lp-btn.active, #stereo-angle-dih-btn.active, #stereo-angle-pp-btn.active, #stereo-angle-skew-btn.active {
+      border-color: var(--violet) !important; color: var(--violet) !important; background: rgba(155,93,229,.12) !important;
     }
 
     .gp-preset-group { margin-bottom: 8px; }
@@ -3546,77 +3640,174 @@
 
       <!-- ── STEREO sim body ── -->
       <div id="sim-stereo" class="sim-body-wrap" style="display:none">
-        <div class="graph-panel" style="overflow-y:auto;max-height:100%">
+        <div class="stereo-panel">
 
-          <div class="gp-section-title">Фигура</div>
-          <div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px">
-            <button class="gp-btn stereo-fig-btn active" onclick="setStereoFigure('cube',this)">Куб</button>
-            <button class="gp-btn stereo-fig-btn" onclick="setStereoFigure('parallelepiped',this)">Параллелепипед</button>
-            <button class="gp-btn stereo-fig-btn" onclick="setStereoFigure('pyramid',this)">Пирамида</button>
-            <button class="gp-btn stereo-fig-btn" onclick="setStereoFigure('tetrahedron',this)">Тетраэдр</button>
-            <button class="gp-btn stereo-fig-btn" onclick="setStereoFigure('cylinder',this)">Цилиндр</button>
-            <button class="gp-btn stereo-fig-btn" onclick="setStereoFigure('cone',this)">Конус</button>
-            <button class="gp-btn stereo-fig-btn" onclick="setStereoFigure('trunccone',this)">Усечённый конус</button>
-            <button class="gp-btn stereo-fig-btn" onclick="setStereoFigure('sphere',this)">Сфера</button>
-            <button class="gp-btn stereo-fig-btn" onclick="setStereoFigure('prism',this)">Призма</button>
-            <button class="gp-btn stereo-fig-btn" onclick="setStereoFigure('truncpyramid',this)">Усеч. пирамида</button>
-            <button class="gp-btn stereo-fig-btn" onclick="setStereoFigure('octahedron',this)">Октаэдр</button>
-            <button class="gp-btn stereo-fig-btn" onclick="setStereoFigure('icosahedron',this)">Икосаэдр</button>
-            <button class="gp-btn stereo-fig-btn" onclick="setStereoFigure('dodecahedron',this)">Додекаэдр</button>
+          <!-- ── Фигуры ── -->
+          <div class="gp-section-title" style="margin-bottom:6px">Многогранники</div>
+          <div class="stereo-fig-grid">
+            <button class="st-fig-btn stereo-fig-btn active" onclick="setStereoFigure('cube',this)" title="Куб">
+              <svg viewBox="0 0 24 24"><rect x="3" y="7" width="12" height="12"/><path d="M3 7l4-4h12v12l-4 4"/><path d="M15 3v12M3 19l4-4"/></svg>Куб
+            </button>
+            <button class="st-fig-btn stereo-fig-btn" onclick="setStereoFigure('parallelepiped',this)" title="Прямоугольный параллелепипед">
+              <svg viewBox="0 0 24 24"><rect x="2" y="8" width="13" height="11"/><path d="M2 8l4-5h13v11l-4 5"/><path d="M15 3v11M2 19l4-5"/></svg>Параллел.
+            </button>
+            <button class="st-fig-btn stereo-fig-btn" onclick="setStereoFigure('prism',this)" title="Правильная призма">
+              <svg viewBox="0 0 24 24"><polygon points="12,3 3,8 3,19 12,21 21,19 21,8"/><line x1="12" y1="3" x2="12" y2="21"/></svg>Призма
+            </button>
+            <button class="st-fig-btn stereo-fig-btn" onclick="setStereoFigure('pyramid',this)" title="Правильная пирамида">
+              <svg viewBox="0 0 24 24"><polygon points="12,2 22,20 2,20"/><line x1="12" y1="2" x2="12" y2="20"/></svg>Пирамида
+            </button>
+            <button class="st-fig-btn stereo-fig-btn" onclick="setStereoFigure('truncpyramid',this)" title="Усечённая пирамида">
+              <svg viewBox="0 0 24 24"><polygon points="6,6 18,6 22,20 2,20"/><line x1="9" y1="6" x2="4" y2="20"/><line x1="15" y1="6" x2="20" y2="20"/></svg>Усеч. пир.
+            </button>
+            <button class="st-fig-btn stereo-fig-btn" onclick="setStereoFigure('tetrahedron',this)" title="Правильный тетраэдр">
+              <svg viewBox="0 0 24 24"><polygon points="12,2 22,20 2,20"/><line x1="12" y1="2" x2="12" y2="20"/><line x1="2" y1="20" x2="12" y2="14"/><line x1="22" y1="20" x2="12" y2="14"/></svg>Тетраэдр
+            </button>
           </div>
 
-          <div class="gp-section-title">Параметры</div>
+          <div class="gp-section-title" style="margin-top:6px;margin-bottom:6px">Правильные многогранники</div>
+          <div class="stereo-fig-grid">
+            <button class="st-fig-btn stereo-fig-btn" onclick="setStereoFigure('octahedron',this)" title="Правильный октаэдр">
+              <svg viewBox="0 0 24 24"><polygon points="12,2 22,12 12,22 2,12"/><line x1="12" y1="2" x2="2" y2="12"/><line x1="12" y1="2" x2="22" y2="12"/><line x1="2" y1="12" x2="12" y2="22"/><line x1="22" y1="12" x2="12" y2="22"/></svg>Октаэдр
+            </button>
+            <button class="st-fig-btn stereo-fig-btn" onclick="setStereoFigure('icosahedron',this)" title="Правильный икосаэдр">
+              <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><polygon points="12,3 20,8 18,17 6,17 4,8"/><line x1="12" y1="3" x2="12" y2="21"/></svg>Икосаэдр
+            </button>
+            <button class="st-fig-btn stereo-fig-btn st-fig-btn-wide" onclick="setStereoFigure('dodecahedron',this)" title="Правильный додекаэдр">
+              <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke-dasharray="4,2"/><polygon points="12,2 20,8 17,17 7,17 4,8"/></svg>Додекаэдр
+            </button>
+          </div>
+
+          <div class="gp-section-title" style="margin-top:6px;margin-bottom:6px">Тела вращения</div>
+          <div class="stereo-fig-grid">
+            <button class="st-fig-btn stereo-fig-btn" onclick="setStereoFigure('cylinder',this)" title="Цилиндр">
+              <svg viewBox="0 0 24 24"><ellipse cx="12" cy="5" rx="9" ry="3"/><ellipse cx="12" cy="19" rx="9" ry="3"/><line x1="3" y1="5" x2="3" y2="19"/><line x1="21" y1="5" x2="21" y2="19"/></svg>Цилиндр
+            </button>
+            <button class="st-fig-btn stereo-fig-btn" onclick="setStereoFigure('cone',this)" title="Конус">
+              <svg viewBox="0 0 24 24"><ellipse cx="12" cy="19" rx="9" ry="3"/><line x1="3" y1="19" x2="12" y2="4"/><line x1="21" y1="19" x2="12" y2="4"/></svg>Конус
+            </button>
+            <button class="st-fig-btn stereo-fig-btn" onclick="setStereoFigure('trunccone',this)" title="Усечённый конус">
+              <svg viewBox="0 0 24 24"><ellipse cx="12" cy="18" rx="9" ry="3"/><ellipse cx="12" cy="7" rx="5" ry="2"/><line x1="3" y1="18" x2="7" y2="7"/><line x1="21" y1="18" x2="17" y2="7"/></svg>Усеч. конус
+            </button>
+            <button class="st-fig-btn stereo-fig-btn" onclick="setStereoFigure('sphere',this)" title="Шар">
+              <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><ellipse cx="12" cy="12" rx="9" ry="3"/></svg>Шар
+            </button>
+          </div>
+
+          <!-- ── Параметры ── -->
+          <div class="gp-section-title" style="margin-top:8px;margin-bottom:6px">Параметры</div>
           <div id="stereo-params">
             <div class="stereo-sl-row" id="sp-a-row">
-              <label>a <span id="sp-a-val">4</span></label>
+              <label>Сторона <b>a</b> <span id="sp-a-val">4</span></label>
               <input type="range" id="sl-sp-a" min="1" max="10" step="0.5" value="4" oninput="stereoParamChange('a',this.value)">
             </div>
             <div class="stereo-sl-row" id="sp-b-row" style="display:none">
-              <label>b <span id="sp-b-val">3</span></label>
+              <label>Сторона <b>b</b> <span id="sp-b-val">3</span></label>
               <input type="range" id="sl-sp-b" min="1" max="10" step="0.5" value="3" oninput="stereoParamChange('b',this.value)">
             </div>
             <div class="stereo-sl-row" id="sp-c-row" style="display:none">
-              <label>c <span id="sp-c-val">5</span></label>
+              <label>Сторона <b>c</b> <span id="sp-c-val">5</span></label>
               <input type="range" id="sl-sp-c" min="1" max="10" step="0.5" value="5" oninput="stereoParamChange('c',this.value)">
             </div>
             <div class="stereo-sl-row" id="sp-h-row" style="display:none">
-              <label>h <span id="sp-h-val">5</span></label>
+              <label>Высота <b>h</b> <span id="sp-h-val">5</span></label>
               <input type="range" id="sl-sp-h" min="1" max="12" step="0.5" value="5" oninput="stereoParamChange('h',this.value)">
             </div>
             <div class="stereo-sl-row" id="sp-r-row" style="display:none">
-              <label>r <span id="sp-r-val">2</span></label>
+              <label>Радиус <b>r</b> <span id="sp-r-val">2</span></label>
               <input type="range" id="sl-sp-r" min="0.5" max="8" step="0.5" value="2" oninput="stereoParamChange('r',this.value)">
             </div>
             <div class="stereo-sl-row" id="sp-R-row" style="display:none">
-              <label>R <span id="sp-R-val">3</span></label>
+              <label>Радиус осн. <b>R</b> <span id="sp-R-val">3</span></label>
               <input type="range" id="sl-sp-R" min="0.5" max="8" step="0.5" value="3" oninput="stereoParamChange('R',this.value)">
             </div>
             <div class="stereo-sl-row" id="sp-n-row" style="display:none">
-              <label>n <span id="sp-n-val">4</span></label>
-              <input type="range" id="sl-sp-n" min="3" max="12" step="1" value="4" oninput="stereoParamChange('n',this.value)">
+              <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px">
+                <span style="font-size:0.72rem;color:var(--text-2)">Граней основания <b>n</b></span>
+                <div class="st-n-ctrl">
+                  <button class="st-n-btn" onclick="stereoNChange(-1)"><svg viewBox="0 0 16 16" fill="none"><line x1="3" y1="8" x2="13" y2="8" stroke-width="2" stroke-linecap="round"/></svg></button>
+                  <span class="st-n-val" id="sp-n-val">4</span>
+                  <button class="st-n-btn" onclick="stereoNChange(+1)"><svg viewBox="0 0 16 16" fill="none"><line x1="8" y1="3" x2="8" y2="13" stroke-width="2" stroke-linecap="round"/><line x1="3" y1="8" x2="13" y2="8" stroke-width="2" stroke-linecap="round"/></svg></button>
+                </div>
+              </div>
             </div>
           </div>
-
-          <div class="stereo-sl-row" style="margin-top:6px">
+          <div class="stereo-sl-row" style="margin-top:2px">
             <label>Прозрачность <span id="sp-opacity-val">0.3</span></label>
             <input type="range" id="sl-sp-opacity" min="0" max="1" step="0.05" value="0.3" oninput="stereoOpacityChange(this.value)">
           </div>
 
-          <div class="gp-section-title" style="margin-top:10px">Отображение</div>
-          <div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px">
-            <button class="gp-btn stereo-toggle active" data-layer="edges" onclick="stereoToggle('edges',this)">Рёбра</button>
-            <button class="gp-btn stereo-toggle active" data-layer="vertices" onclick="stereoToggle('vertices',this)">Вершины</button>
-            <button class="gp-btn stereo-toggle active" data-layer="labels" onclick="stereoToggle('labels',this)">Метки</button>
-            <button class="gp-btn stereo-toggle active" data-layer="axes" onclick="stereoToggle('axes',this)">Оси</button>
-            <button class="gp-btn stereo-toggle active" data-layer="grid" onclick="stereoToggle('grid',this)">Сетка</button>
+          <!-- ── Отображение ── -->
+          <div class="gp-section-title" style="margin-top:8px;margin-bottom:4px">Отображение</div>
+          <div onclick="stereoToggleSt('edges',this.querySelector('.st-toggle'))" class="st-toggle-row">
+            <span class="st-toggle-label"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18"/></svg>Рёбра</span>
+            <div class="st-toggle on" id="stg-edges"></div>
+          </div>
+          <div onclick="stereoToggleSt('vertices',this.querySelector('.st-toggle'))" class="st-toggle-row">
+            <span class="st-toggle-label"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4" fill="currentColor"/></svg>Вершины</span>
+            <div class="st-toggle on" id="stg-vertices"></div>
+          </div>
+          <div onclick="stereoToggleSt('labels',this.querySelector('.st-toggle'))" class="st-toggle-row">
+            <span class="st-toggle-label"><svg viewBox="0 0 24 24"><path d="M4 7h16M4 12h10M4 17h7"/></svg>Подписи</span>
+            <div class="st-toggle on" id="stg-labels"></div>
+          </div>
+          <div onclick="stereoToggleSt('axes',this.querySelector('.st-toggle'))" class="st-toggle-row">
+            <span class="st-toggle-label"><svg viewBox="0 0 24 24"><line x1="2" y1="12" x2="22" y2="12"/><line x1="12" y1="2" x2="12" y2="22"/></svg>Оси</span>
+            <div class="st-toggle on" id="stg-axes"></div>
+          </div>
+          <div onclick="stereoToggleSt('grid',this.querySelector('.st-toggle'))" class="st-toggle-row">
+            <span class="st-toggle-label"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="3" y1="15" x2="21" y2="15"/><line x1="9" y1="3" x2="9" y2="21"/><line x1="15" y1="3" x2="15" y2="21"/></svg>Сетка</span>
+            <div class="st-toggle on" id="stg-grid"></div>
           </div>
 
-          <div class="gp-section-title" style="margin-top:8px">Сечение</div>
-          <div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px">
-            <button class="gp-btn stereo-sect-btn" id="sect-toggle" onclick="stereoSectionToggle(this)">Показать</button>
-            <button class="gp-btn stereo-sect-type" data-type="horizontal" onclick="stereoSectionType('horizontal',this)">Горизонт.</button>
-            <button class="gp-btn stereo-sect-type" data-type="diagonal" onclick="stereoSectionType('diagonal',this)">Диагональ</button>
-            <button class="gp-btn stereo-sect-type" data-type="custom" onclick="stereoSectionType('custom',this)">По точкам</button>
+          <!-- ── Элементы фигуры ── -->
+          <div class="gp-section-title" style="margin-top:8px;margin-bottom:4px">Элементы</div>
+          <div onclick="stereoToggleElem('height',this.querySelector('.st-toggle'))" class="st-toggle-row">
+            <span class="st-toggle-label"><svg viewBox="0 0 24 24"><line x1="12" y1="3" x2="12" y2="21" stroke-dasharray="4,2"/><line x1="9" y1="21" x2="15" y2="21"/></svg>Высота</span>
+            <div class="st-toggle" id="stg-height"></div>
+          </div>
+          <div onclick="stereoToggleElem('apothem',this.querySelector('.st-toggle'))" class="st-toggle-row">
+            <span class="st-toggle-label"><svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="6" y1="19" x2="18" y2="19"/></svg>Апофема</span>
+            <div class="st-toggle" id="stg-apothem"></div>
+          </div>
+          <div onclick="stereoToggleElem('diagonals',this.querySelector('.st-toggle'))" class="st-toggle-row">
+            <span class="st-toggle-label"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18"/><line x1="3" y1="3" x2="21" y2="21" stroke-dasharray="4,2"/><line x1="21" y1="3" x2="3" y2="21" stroke-dasharray="4,2"/></svg>Диагонали</span>
+            <div class="st-toggle" id="stg-diagonals"></div>
+          </div>
+          <div onclick="stereoToggleElem('midpoints',this.querySelector('.st-toggle'))" class="st-toggle-row">
+            <span class="st-toggle-label"><svg viewBox="0 0 24 24"><line x1="3" y1="12" x2="21" y2="12"/><circle cx="12" cy="12" r="3" fill="currentColor"/></svg>Середины рёбер</span>
+            <div class="st-toggle" id="stg-midpoints"></div>
+          </div>
+          <div onclick="stereoToggleElem('inscribed',this.querySelector('.st-toggle'))" class="st-toggle-row">
+            <span class="st-toggle-label"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="5" stroke-dasharray="3,2"/><rect x="3" y="3" width="18" height="18"/></svg>Вписанная сфера</span>
+            <div class="st-toggle" id="stg-inscribed"></div>
+          </div>
+          <div onclick="stereoToggleElem('circumscribed',this.querySelector('.st-toggle'))" class="st-toggle-row">
+            <span class="st-toggle-label"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke-dasharray="4,2"/><polygon points="6,18 18,18 12,6"/></svg>Описанная сфера</span>
+            <div class="st-toggle" id="stg-circumscribed"></div>
+          </div>
+          <div onclick="stereoToggleElem('edgelengths',this.querySelector('.st-toggle'))" class="st-toggle-row">
+            <span class="st-toggle-label"><svg viewBox="0 0 24 24"><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="9" x2="4" y2="15"/><line x1="20" y1="9" x2="20" y2="15"/></svg>Длины рёбер</span>
+            <div class="st-toggle" id="stg-edgelengths"></div>
+          </div>
+          <div id="sect-area-display" style="font-size:0.7rem;color:#06D6E0;margin-top:2px;display:none"></div>
+          <div id="sphere-radius-info" style="font-size:0.7rem;color:#F59E0B;margin-top:2px;display:none"></div>
+
+          <!-- ── Сечение ── -->
+          <div class="gp-section-title" style="margin-top:8px;margin-bottom:6px">Сечение</div>
+          <div class="st-tool-grid" style="margin-bottom:4px">
+            <button class="st-tool-btn stereo-sect-btn st-tool-btn-wide" id="sect-toggle" onclick="stereoSectionToggle(this)">
+              <svg viewBox="0 0 24 24"><path d="M3 12h18M12 3v18" stroke-dasharray="4,2"/></svg>Показать сечение
+            </button>
+            <button class="st-tool-btn stereo-sect-type active" data-type="horizontal" onclick="stereoSectionType('horizontal',this)">
+              <svg viewBox="0 0 24 24"><line x1="3" y1="12" x2="21" y2="12"/></svg>Горизонт.
+            </button>
+            <button class="st-tool-btn stereo-sect-type" data-type="diagonal" onclick="stereoSectionType('diagonal',this)">
+              <svg viewBox="0 0 24 24"><line x1="4" y1="18" x2="20" y2="6"/></svg>Диагональ
+            </button>
+            <button class="st-tool-btn stereo-sect-type st-tool-btn-wide" data-type="custom" onclick="stereoSectionType('custom',this)">
+              <svg viewBox="0 0 24 24"><circle cx="5" cy="19" r="2" fill="currentColor"/><circle cx="12" cy="5" r="2" fill="currentColor"/><circle cx="19" cy="15" r="2" fill="currentColor"/><polyline points="5,19 12,5 19,15 5,19"/></svg>По 3+ точкам
+            </button>
           </div>
           <div class="stereo-sl-row">
             <label>Высота <span id="sp-sect-val">50%</span></label>
@@ -3626,86 +3817,94 @@
             <label>Наклон <span id="sp-angle-val">50%</span></label>
             <input type="range" id="sl-sp-angle" min="0" max="100" step="1" value="50" oninput="stereoSectionAngle(this.value)">
           </div>
-          <div id="sect-area-display" style="font-size:0.7rem;color:#06D6E0;margin-top:2px;display:none"></div>
-          <div id="sphere-radius-info" style="font-size:0.7rem;color:#F59E0B;margin-top:2px;display:none"></div>
 
-          <div class="gp-section-title" style="margin-top:8px">Точки и линии</div>
-          <div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px">
-            <button class="gp-btn" id="stereo-point-btn" onclick="stereoPointMode(this)">Поставить точку</button>
-            <button class="gp-btn" id="stereo-connect-btn" onclick="stereoConnectMode(this)">Соединить</button>
-            <button class="gp-btn" id="stereo-undo-pt-btn" onclick="stereoUndoPoint()">Отменить</button>
-            <button class="gp-btn" id="stereo-clear-pts-btn" onclick="stereoClearPoints()">Очистить</button>
+          <!-- ── Инструменты ── -->
+          <div class="gp-section-title" style="margin-top:8px;margin-bottom:6px">Инструменты</div>
+          <div class="st-tool-grid">
+            <button class="st-tool-btn" id="stereo-point-btn" onclick="stereoPointMode(this)" title="Поставить точку на ребро">
+              <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4" fill="currentColor"/><line x1="3" y1="12" x2="21" y2="12"/></svg>Точка
+            </button>
+            <button class="st-tool-btn" id="stereo-connect-btn" onclick="stereoConnectMode(this)" title="Соединить две точки отрезком">
+              <svg viewBox="0 0 24 24"><circle cx="5" cy="19" r="2.5" fill="currentColor"/><circle cx="19" cy="5" r="2.5" fill="currentColor"/><line x1="5" y1="19" x2="19" y2="5" stroke-dasharray="4,2"/></svg>Соединить
+            </button>
+            <button class="st-tool-btn" id="stereo-measure-btn" onclick="stereoMeasure(this)" title="Измерить расстояние между двумя точками">
+              <svg viewBox="0 0 24 24"><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="9" x2="4" y2="15"/><line x1="20" y1="9" x2="20" y2="15"/></svg>Измерение
+            </button>
+            <button class="st-tool-btn" id="stereo-unfold-btn" onclick="stereoUnfold(this)" title="Развернуть в сетку">
+              <svg viewBox="0 0 24 24"><rect x="3" y="10" width="18" height="11"/><path d="M8 10V6a4 4 0 0 1 8 0v4"/></svg>Развёртка
+            </button>
           </div>
-          <div id="points-info" style="font-size:0.68rem;color:rgba(255,255,255,0.5);margin-bottom:4px"></div>
+          <div class="st-action-grid" style="margin-top:3px">
+            <button class="st-action-btn" onclick="stereoUndoPoint()">Удалить точку</button>
+            <button class="st-action-btn" onclick="stereoClearPoints()">Очист. точки</button>
+            <button class="st-action-btn" onclick="stereoMeasureUndo()">Удалить изм.</button>
+            <button class="st-action-btn" onclick="stereoMeasureClear()">Очист. изм.</button>
+          </div>
+          <div id="points-info" style="font-size:0.65rem;color:rgba(255,255,255,0.4);margin-top:2px"></div>
 
-          <div class="gp-section-title" style="margin-top:8px">Элементы фигуры</div>
-          <div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px">
-            <button class="gp-btn" id="stereo-height-btn" onclick="stereoToggleHeight(this)">Высота</button>
-            <button class="gp-btn" id="stereo-apothem-btn" onclick="stereoToggleApothem(this)">Апофема</button>
-            <button class="gp-btn" id="stereo-diag-btn" onclick="stereoToggleDiag(this)">Диагонали</button>
-            <button class="gp-btn" id="stereo-mid-btn" onclick="stereoToggleMid(this)">Середины</button>
-            <button class="gp-btn" id="stereo-inscribed-btn" onclick="stereoInscribed(this)">Вписанная</button>
-            <button class="gp-btn" id="stereo-circumscribed-btn" onclick="stereoCircumscribed(this)">Описанная</button>
+          <!-- ── Метки рёбер ── -->
+          <div class="gp-section-title" style="margin-top:8px;margin-bottom:6px">Метки рёбер</div>
+          <div class="st-tool-grid">
+            <button class="st-tool-btn" id="stereo-mark-tick-btn" onclick="stereoMarkMode('ticks',this)" title="Засечки равных рёбер — кликните ребро (до 3 штрихов)">
+              <svg viewBox="0 0 24 24"><line x1="5" y1="19" x2="19" y2="5"/><line x1="9" y1="9" x2="11" y2="11"/><line x1="13" y1="13" x2="15" y2="15"/></svg>Засечки =
+            </button>
+            <button class="st-tool-btn" id="stereo-mark-par-btn" onclick="stereoMarkMode('parallel',this)" title="Метки параллельных рёбер — кликните ребро">
+              <svg viewBox="0 0 24 24"><line x1="3" y1="8" x2="21" y2="8"/><line x1="3" y1="16" x2="21" y2="16"/><polyline points="15 5 18 8 15 11"/><polyline points="15 13 18 16 15 19"/></svg>Паралл. →
+            </button>
+          </div>
+          <div class="st-action-grid" style="margin-top:3px">
+            <button class="st-action-btn st-tool-btn-wide" onclick="stereoMarkClear()" style="grid-column:span 2">Очистить метки</button>
           </div>
 
-          <div class="gp-section-title" style="margin-top:8px">Метки рёбер</div>
-          <div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px">
-            <button class="gp-btn" id="stereo-mark-tick-btn" onclick="stereoMarkMode('ticks',this)" title="Засечки равных рёбер — кликните на ребро (до 3 штрихов)">Засечки</button>
-            <button class="gp-btn" id="stereo-mark-par-btn" onclick="stereoMarkMode('parallel',this)" title="Метки параллельных рёбер — кликните на ребро (до 3 стрелок)">Параллельные</button>
-            <button class="gp-btn" id="stereo-edge-len-btn" onclick="stereoToggleEdgeLengths(this)" title="Показать длины всех рёбер">Длины рёбер</button>
-            <button class="gp-btn" onclick="stereoMarkClear()">Очистить</button>
+          <!-- ── Производные точки ── -->
+          <div class="gp-section-title" style="margin-top:8px;margin-bottom:6px">Производные точки</div>
+          <div class="st-tool-grid">
+            <button class="st-tool-btn" id="stereo-derive-mid-btn" onclick="stereoDerive('midpoint',this)" title="Середина ребра — кликните ребро">
+              <svg viewBox="0 0 24 24"><line x1="3" y1="12" x2="21" y2="12"/><circle cx="12" cy="12" r="3.5" fill="currentColor"/></svg>Сер. ребра
+            </button>
+            <button class="st-tool-btn" id="stereo-derive-fc-btn" onclick="stereoDerive('face_centroid',this)" title="Центр грани — кликните грань">
+              <svg viewBox="0 0 24 24"><polygon points="12,3 21,21 3,21"/><circle cx="12" cy="15" r="2.5" fill="currentColor"/></svg>Центр грани
+            </button>
+            <button class="st-tool-btn" id="stereo-derive-alt-btn" onclick="stereoDerive('alt_foot',this)" title="Основание высоты: вершина → ребро">
+              <svg viewBox="0 0 24 24"><line x1="3" y1="20" x2="21" y2="20"/><line x1="10" y1="4" x2="10" y2="20" stroke-dasharray="4,2"/><path d="M10 20 L13 20 L13 17" fill="none"/></svg>Осн. высоты
+            </button>
+            <button class="st-tool-btn" id="stereo-derive-cen-btn" onclick="stereoDerive('solid_centroid',this)" title="Центроид тела — точка G">
+              <svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18"/><circle cx="12" cy="12" r="3" fill="currentColor"/><line x1="3" y1="3" x2="21" y2="21" stroke-dasharray="4,2" opacity=".4"/><line x1="21" y1="3" x2="3" y2="21" stroke-dasharray="4,2" opacity=".4"/></svg>Центроид G
+            </button>
+          </div>
+          <div class="st-action-grid" style="margin-top:3px">
+            <button class="st-action-btn" onclick="stereoDeriveUndo()">Удалить послед.</button>
+            <button class="st-action-btn" onclick="stereoDeriveClear()">Очистить</button>
           </div>
 
-          <div class="gp-section-title" style="margin-top:8px">Производные точки</div>
-          <div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px">
-            <button class="gp-btn" id="stereo-derive-mid-btn" onclick="stereoDerive('midpoint',this)" title="Середина ребра — кликните на ребро">Середина ребра</button>
-            <button class="gp-btn" id="stereo-derive-fc-btn" onclick="stereoDerive('face_centroid',this)" title="Центр грани — кликните на грань">Центр грани</button>
-            <button class="gp-btn" id="stereo-derive-alt-btn" onclick="stereoDerive('alt_foot',this)" title="Основание высоты — кликните вершину, затем точку ребра">Осн. высоты</button>
-            <button class="gp-btn" id="stereo-derive-cen-btn" onclick="stereoDerive('solid_centroid',this)" title="Центроид тела — вставляется автоматически">Центроид тела</button>
-            <button class="gp-btn" onclick="stereoDeriveUndo()">Удалить послед.</button>
-            <button class="gp-btn" onclick="stereoDeriveClear()">Очистить</button>
+          <!-- ── Углы и расстояния ── -->
+          <div class="gp-section-title" style="margin-top:8px;margin-bottom:6px">Углы и расстояния</div>
+          <div class="st-tool-grid">
+            <button class="st-tool-btn" id="stereo-angle-edge-btn" onclick="stereoAngleMode('edge',this)" title="Угол между рёбрами: 3 точки A-B-C">
+              <svg viewBox="0 0 24 24"><line x1="12" y1="19" x2="4" y2="5"/><line x1="12" y1="19" x2="20" y2="6"/><path d="M7 16 Q12 13 17 15" fill="none" stroke-dasharray="3,2"/></svg>∠ рёбер
+            </button>
+            <button class="st-tool-btn" id="stereo-angle-lp-btn" onclick="stereoAngleMode('linePlane',this)" title="Угол прямой к плоскости: 2 точки → грань">
+              <svg viewBox="0 0 24 24"><line x1="4" y1="20" x2="20" y2="4"/><ellipse cx="12" cy="18" rx="9" ry="3" fill="none" opacity=".6"/></svg>∠ пр.–пл.
+            </button>
+            <button class="st-tool-btn" id="stereo-angle-dih-btn" onclick="stereoAngleMode('dihedral',this)" title="Двугранный угол: 2 точки общего ребра">
+              <svg viewBox="0 0 24 24"><line x1="12" y1="3" x2="12" y2="21"/><line x1="3" y1="12" x2="12" y2="21"/><line x1="21" y1="7" x2="12" y2="21"/></svg>∠ двугр.
+            </button>
+            <button class="st-tool-btn" id="stereo-angle-pp-btn" onclick="stereoAngleMode('pointPlane',this)" title="Расстояние точка–плоскость">
+              <svg viewBox="0 0 24 24"><ellipse cx="12" cy="18" rx="9" ry="3" fill="none"/><line x1="12" y1="5" x2="12" y2="18" stroke-dasharray="3,2"/><circle cx="12" cy="5" r="2.5" fill="currentColor"/></svg>d(т→пл)
+            </button>
+            <button class="st-tool-btn st-tool-btn-wide" id="stereo-angle-skew-btn" onclick="stereoAngleMode('skewLines',this)" title="Угол и расстояние скрещивающихся прямых: P1,P2→P3,P4">
+              <svg viewBox="0 0 24 24"><line x1="3" y1="6" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="12" opacity=".5"/><circle cx="12" cy="9" r="2" fill="currentColor"/></svg>∠ скрещивающихся прямых
+            </button>
           </div>
-
-          <div class="gp-section-title" style="margin-top:8px">Инструменты</div>
-          <div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px">
-            <button class="gp-btn" id="stereo-unfold-btn" onclick="stereoUnfold(this)">Развёртка</button>
-            <button class="gp-btn" id="stereo-measure-btn" onclick="stereoMeasure(this)">Измерение</button>
-            <button class="gp-btn" onclick="stereoMeasureUndo()">Удалить посл.</button>
-            <button class="gp-btn" onclick="stereoMeasureClear()">Очистить</button>
+          <div class="st-action-grid" style="margin-top:3px">
+            <button class="st-action-btn" style="grid-column:span 2" onclick="stereoAngleClear()">Очистить углы</button>
           </div>
+          <div id="angle-hint" style="font-size:0.63rem;color:rgba(255,255,255,0.38);margin-top:3px;line-height:1.4"></div>
 
-          <div class="gp-section-title" style="margin-top:8px">Углы и расстояния</div>
-          <div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px">
-            <button class="gp-btn" id="stereo-angle-edge-btn" onclick="stereoAngleMode('edge', this)">∠ рёбер</button>
-            <button class="gp-btn" id="stereo-angle-lp-btn" onclick="stereoAngleMode('linePlane', this)">∠ прям.–пл.</button>
-            <button class="gp-btn" id="stereo-angle-dih-btn" onclick="stereoAngleMode('dihedral', this)">∠ двугранный</button>
-            <button class="gp-btn" id="stereo-angle-pp-btn" onclick="stereoAngleMode('pointPlane', this)">d(т<svg class="ic" viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>пл)</button>
-            <button class="gp-btn" id="stereo-angle-skew-btn" onclick="stereoAngleMode('skewLines', this)">∠ скрещ. прям.</button>
-            <button class="gp-btn" id="stereo-angle-clear-btn" onclick="stereoAngleClear()">Очистить</button>
-          </div>
-          <div id="angle-hint" style="font-size:0.65rem;color:rgba(255,255,255,0.4);margin-bottom:4px"></div>
+          <!-- ── Формулы ── -->
+          <div class="gp-section-title" style="margin-top:8px;margin-bottom:4px">Формулы</div>
+          <div id="stereo-formulas" style="font-size:0.72rem;color:rgba(255,255,255,0.7);line-height:1.5;margin-bottom:6px"></div>
 
-          <div class="gp-section-title" style="margin-top:10px">Формулы</div>
-          <div id="stereo-formulas" style="font-size:0.72rem;color:rgba(255,255,255,0.7);line-height:1.5"></div>
-
-          <div class="gp-section-title" style="margin-top:10px">Управление</div>
-          <div class="tp-text" style="font-size:0.72rem">
-            Вращение: зажмите и тяните<br>
-            Зум: колёсико мыши<br>
-            Точка: включите режим, кликните на ребро<br>
-            Соединить: кликните 2 точки/вершины<br>
-            По точкам: поставьте 3+ точки <svg class="ic" viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg> сечение<br>
-            ∠ рёбер: 3 точки (A-B-C), угол в вершине B<br>
-            ∠ прям.–пл.: 2 точки (прямая), затем грань<br>
-            ∠ двугранный: 2 точки общего ребра<br>
-            d(т<svg class="ic" viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>пл): точка, затем грань — перпендикуляр<br>
-            ∠ скрещ.: 4 точки — P1,P2 (пр.1), P3,P4 (пр.2)<br>
-            Засечки/Парал.: кликайте рёбра (0→1→2→3→0)<br>
-            Середина ребра: клик на ребро<br>
-            Центр грани: клик на грань<br>
-            Осн. высоты: вершина → точка/ребро<br>
-            Координаты: наведите на вершину
-          </div>
         </div>
         <div class="graph-canvas-outer">
           <div class="graph-canvas-wrap" id="stereo-container"></div>
@@ -8121,16 +8320,14 @@
       stereoSim.setFigure(type);
       _stereoShowParams(type);
       _stereoUpdateFormulas();
-      // reset section/unfold/sphere buttons
+      // reset toggles and tool buttons
       document.getElementById('sect-toggle').classList.remove('active');
       document.getElementById('stereo-unfold-btn').classList.remove('active');
       document.getElementById('stereo-measure-btn').classList.remove('active');
-      document.getElementById('stereo-inscribed-btn').classList.remove('active');
-      document.getElementById('stereo-circumscribed-btn').classList.remove('active');
-      document.getElementById('stereo-height-btn').classList.remove('active');
-      document.getElementById('stereo-apothem-btn').classList.remove('active');
-      document.getElementById('stereo-diag-btn').classList.remove('active');
-      document.getElementById('stereo-mid-btn').classList.remove('active');
+      // reset element toggles
+      ['stg-height','stg-apothem','stg-diagonals','stg-midpoints','stg-inscribed','stg-circumscribed','stg-edgelengths'].forEach(id => {
+        document.getElementById(id)?.classList.remove('on');
+      });
       _stereoDeactivateTools();
     }
   }
@@ -8158,6 +8355,7 @@
     if (stereoSim) stereoSim.setOpacity(val);
   }
 
+  // legacy (used nowhere now but kept for safety)
   function stereoToggle(layer, btn) {
     const on = !btn.classList.contains('active');
     btn.classList.toggle('active', on);
@@ -8169,6 +8367,41 @@
     if (layer === 'grid')     stereoSim.toggleGrid(on);
   }
 
+  // new toggle-row style
+  function stereoToggleSt(layer, toggle) {
+    const on = !toggle.classList.contains('on');
+    toggle.classList.toggle('on', on);
+    if (!stereoSim) return;
+    if (layer === 'edges')    stereoSim.toggleEdges(on);
+    if (layer === 'vertices') stereoSim.toggleVertices(on);
+    if (layer === 'labels')   stereoSim.toggleLabels(on);
+    if (layer === 'axes')     stereoSim.toggleAxes(on);
+    if (layer === 'grid')     stereoSim.toggleGrid(on);
+  }
+
+  function stereoToggleElem(layer, toggle) {
+    const on = !toggle.classList.contains('on');
+    toggle.classList.toggle('on', on);
+    if (!stereoSim) return;
+    if (layer === 'height')        stereoSim.toggleHeight(on);
+    if (layer === 'apothem')       stereoSim.toggleApothem(on);
+    if (layer === 'diagonals')     stereoSim.toggleDiagonals(on);
+    if (layer === 'midpoints')     stereoSim.toggleMidpoints(on);
+    if (layer === 'inscribed')     stereoSim.toggleInscribed(on);
+    if (layer === 'circumscribed') stereoSim.toggleCircumscribed(on);
+    if (layer === 'edgelengths')   stereoSim.toggleEdgeLengths(on);
+  }
+
+  // n-stepper for prism/pyramid
+  function stereoNChange(delta) {
+    if (!stereoSim) return;
+    const cur = stereoSim.params.n || 4;
+    const nv = Math.max(3, Math.min(12, cur + delta));
+    document.getElementById('sp-n-val').textContent = nv;
+    stereoSim.setParam('n', nv);
+    _stereoUpdateFormulas();
+  }
+
   function stereoSectionToggle(btn) {
     const on = !btn.classList.contains('active');
     btn.classList.toggle('active', on);