From e3afa5b95a6e49ce62e0db5b828d43c03d723323 Mon Sep 17 00:00:00 2001
From: treamz <treamz@gmail.com>
Date: Sat, 21 Mar 2026 22:36:59 +0300
Subject: [PATCH] Standardize: shared.css/js, unified sidebar/theme/titles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Extract shared CSS (sidebar, theme vars, layout) into shared.css
- Extract shared JS (tailwind config, sidebar injection, theme toggle) into shared.js
- Remove ~1200 lines of duplicated code across 13 HTML pages
- Standardize all titles to format: Tool Name — WA Dev Tools
- Standardize page headers (h1 + description) across all tools
- Standardize container padding (tool-container class)
- Sidebar now injected via JS — single source of truth
- Use CSS variables for accent colors everywhere (no more hardcoded #0054e6)
---
 public/compress.html    |  177 +-
 public/converter.html   |   97 +-
 public/editor.html      |   40 +-
 public/formatter.html   |   97 +-
 public/httpclient.html  |  128 +-
 public/index.html       |  177 +-
 public/md.html          |  179 +-
 public/parser.html      |  173 +-
 public/password.html    |  172 +-
 public/placeholder.html |  170 +-
 public/redirects.html   |  128 +-
 public/sanitizer.html   |   97 +-
 public/shared.css       |   97 +
 public/shared.js        |  111 +
 public/svgeditor.html   | 4882 +++++++++++++++++++--------------------
 15 files changed, 2749 insertions(+), 3976 deletions(-)
 create mode 100644 public/shared.css
 create mode 100644 public/shared.js
diff --git a/public/compress.html b/public/compress.html
index 3c49cd4..8a0429a 100644
--- a/public/compress.html
+++ b/public/compress.html
@@ -3,95 +3,13 @@
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Сжать картинки</title>
+    <title>Сжатие картинок — WA Dev Tools</title>
     <script src="/vendor/tailwind.js"></script>
+    <script src="/shared.js"></script>
     <link href="/vendor/fonts.css" rel="stylesheet">
-    <script>
-        tailwind.config = {
-            darkMode: 'class',
-            theme: {
-                extend: {
-                    fontFamily: {
-                        mono: ['JetBrains Mono', 'monospace'],
-                        sans: ['Manrope', 'sans-serif'],
-                    },
-                    colors: {
-                        surface: { 900: '#060c18', 800: '#091020', 700: '#0d1828', 600: '#162040' },
-                        accent: { DEFAULT: '#0054e6', dim: '#0043b8', bright: '#6b9fff' },
-                        warn: '#ffd600',
-                        danger: '#ff5252',
-                    }
-                }
-            }
-        }
-    </script>
+    <link href="/shared.css" rel="stylesheet">
+    <script>window.WA_TOOL_ID = 'compress';</script>
     <style>
-        /* Sidebar */
-        .sidebar{position:fixed;top:0;left:0;width:56px;height:100vh;display:flex;flex-direction:column;align-items:center;padding:16px 0 12px;z-index:50;border-right:1px solid var(--surface-600);background:var(--surface-800);backdrop-filter:blur(12px);transition:background .3s,border-color .3s}
-        .sidebar-logo{margin-bottom:24px;color:var(--text-muted);font-size:10px;font-weight:700;letter-spacing:.08em;font-family:'JetBrains Mono',monospace}
-        .sidebar-nav{display:flex;flex-direction:column;gap:6px;flex:1}
-        .sidebar-link{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);transition:all .2s;text-decoration:none;position:relative}
-        .sidebar-link:hover{color:var(--text-secondary);background:rgba(255,255,255,.04)}
-        .sidebar-link.active{color:#0054e6;background:rgba(0,84,230,.08)}
-        .sidebar-link.active::before{content:'';position:absolute;left:-8px;top:50%;transform:translateY(-50%);width:3px;height:20px;border-radius:0 3px 3px 0;background:#0054e6}
-        .sidebar-bottom{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:8px}
-        .main-content{margin-left:56px}
-
-        /* Mobile bottom bar */
-        @media(max-width:640px){
-            .sidebar{position:fixed;top:auto;bottom:0;left:0;width:100%;height:52px;flex-direction:row;justify-content:center;padding:0 16px;border-right:none;border-top:1px solid var(--surface-600);gap:0}
-            .sidebar-logo{display:none}
-            .sidebar-nav{flex-direction:row;gap:4px;flex:none}
-            .sidebar-bottom{margin-top:0;margin-left:auto;flex-direction:row}
-            .sidebar-link.active::before{left:50%;top:auto;bottom:-6px;transform:translateX(-50%);width:20px;height:3px;border-radius:3px 3px 0 0}
-            .main-content{margin-left:0;padding-bottom:60px}
-        }
-
-        /* Theme variables */
-        :root {
-            --bg: #f5f5f7;
-            --bg-grad1: rgba(0, 67, 184, 0.04);
-            --bg-grad2: rgba(0, 50, 140, 0.03);
-            --surface-800: rgba(255,255,255,0.85);
-            --surface-700: #f0f0f3;
-            --surface-600: #dde0e6;
-            --text-primary: #1a1a2e;
-            --text-secondary: #555;
-            --text-muted: #888;
-            --bar-bg: #e0e0e0;
-            --select-bg: #f0f0f3;
-            --select-color: #1a1a2e;
-        }
-        .dark {
-            --bg: #060c18;
-            --bg-grad1: rgba(0, 84, 230, 0.03);
-            --bg-grad2: rgba(0, 67, 184, 0.02);
-            --surface-800: rgba(9,16,32,0.8);
-            --surface-700: #0d1828;
-            --surface-600: #162040;
-            --text-primary: #fff;
-            --text-secondary: #c0c0c0;
-            --text-muted: #666;
-            --bar-bg: #0d1828;
-            --select-bg: #091020;
-            --select-color: #e0e0e0;
-        }
-        body {
-            background: var(--bg);
-            background-image:
-                radial-gradient(ellipse at 20% 50%, var(--bg-grad1) 0%, transparent 50%),
-                radial-gradient(ellipse at 80% 20%, var(--bg-grad2) 0%, transparent 50%);
-            min-height: 100vh;
-            transition: background 0.3s;
-        }
-        .dark .noise::before {
-            content: '';
-            position: fixed;
-            inset: 0;
-            background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
-            pointer-events: none;
-            z-index: 0;
-        }
         .dropzone-active { border-color: #0054e6 !important; background: rgba(0, 84, 230, 0.05) !important; }
         .dropzone-active .drop-icon { transform: scale(1.1) translateY(-4px); }
         .drop-icon { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
@@ -108,85 +26,21 @@
         progress::-webkit-progress-bar { background: var(--bar-bg); border-radius: 2px; }
         progress::-webkit-progress-value { background: linear-gradient(90deg, #0043b8, #0054e6); border-radius: 2px; transition: width 0.2s; }
         select, select option { background: var(--select-bg); color: var(--select-color); }
-
-        /* Theme toggle */
-        .theme-toggle { position: relative; width: 44px; height: 24px; border-radius: 12px; cursor: pointer; transition: background 0.3s; }
-        .dark .theme-toggle { background: #162040; }
-        .theme-toggle { background: #dde0e6; }
-        .theme-toggle-knob { position: absolute; top: 2px; width: 20px; height: 20px; border-radius: 50%; transition: left 0.3s, background 0.3s; display: flex; align-items: center; justify-content: center; }
-        .dark .theme-toggle-knob { left: 22px; background: #0d1828; }
-        .theme-toggle-knob { left: 2px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
     </style>
 </head>
 <body class="noise dark:text-gray-200 text-gray-700 font-sans antialiased">
 
-<!-- Sidebar -->
-<nav class="sidebar">
-    <div class="sidebar-logo">WA</div>
-    <div class="sidebar-nav">
-        <a href="/" class="sidebar-link" title="Главная">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/></svg>
-        </a>
-        <a href="/compress" class="sidebar-link active" title="Картинки">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0023.25 18.75V5.25A2.25 2.25 0 0021 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z"/></svg>
-        </a>
-        <a href="/md" class="sidebar-link" title="Markdown">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/></svg>
-        </a>
-        <a href="/placeholder" class="sidebar-link" title="Placeholder">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714a2.25 2.25 0 00.659 1.591L19 14.5M14.25 3.104c.251.023.501.05.75.082M19 14.5l-2.47 2.47a2.25 2.25 0 01-1.59.659H9.06a2.25 2.25 0 01-1.591-.659L5 14.5m14 0V17a2.25 2.25 0 01-2.25 2.25H7.25A2.25 2.25 0 015 17v-2.5"/></svg>
-        </a>
-        <a href="/parser" class="sidebar-link" title="Parser">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m9.86-2.06a4.5 4.5 0 00-6.364-6.364L6.257 6.514a4.5 4.5 0 001.242 7.244"/></svg>
-        </a>
-        <a href="/password" class="sidebar-link" title="Password">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"/></svg>
-        </a>
-        <a href="/sanitizer" class="sidebar-link" title="Sanitizer">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
-        </a>
-        <a href="/converter" class="sidebar-link" title="Converter">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"/></svg>
-        </a>
-        <a href="/formatter" class="sidebar-link" title="Formatter">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"/></svg>
-        </a>
-        <a href="/editor" class="sidebar-link" title="Editor">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"/></svg>
-        </a>
-        <a href="/httpclient" class="sidebar-link" title="HTTP Client">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"/></svg>
-        </a>
-        <a href="/redirects" class="sidebar-link" title="Redirect Analyzer">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg>
-        </a>
-        <a href="/svgeditor" class="sidebar-link" title="SVG Редактор">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 00-5.78 1.128 2.25 2.25 0 01-2.4 2.245 4.5 4.5 0 008.4-2.245c0-.399-.078-.78-.22-1.128zm0 0a15.998 15.998 0 003.388-1.62m-5.043-.025a15.994 15.994 0 011.622-3.395m3.42 3.42a15.995 15.995 0 004.764-4.648l3.876-5.814a1.151 1.151 0 00-1.597-1.597L14.146 6.32a15.996 15.996 0 00-4.649 4.763m3.42 3.42a6.776 6.776 0 00-3.42-3.42"/></svg>
-        </a>
-    </div>
-    <div class="sidebar-bottom">
-        <div class="theme-toggle" id="themeToggle" title="Переключить тему">
-            <div class="theme-toggle-knob">
-                <svg class="w-3 h-3 dark:hidden text-amber-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"/></svg>
-                <svg class="w-3 h-3 hidden dark:block text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/></svg>
-            </div>
-        </div>
-    </div>
-</nav>
-
 <div class="main-content">
-<div class="relative z-10 max-w-2xl mx-auto px-4 py-8 sm:py-12">
+<div class="tool-container relative z-10 max-w-2xl mx-auto py-8 sm:py-12">
 
     <!-- Header -->
     <div class="text-center mb-8 fade-up">
-        <div class="inline-flex items-center gap-2 mb-3 px-3 py-1 rounded-full border dark:border-surface-600 border-gray-300 dark:bg-surface-800/60 bg-white/60 text-xs font-mono dark:text-gray-400 text-gray-500 tracking-wide">
-            <span class="w-1.5 h-1.5 rounded-full bg-accent animate-pulse"></span>
-            JPEG &middot; PNG &middot; WebP
+        <div class="page-header">
+            <h1 class="text-3xl sm:text-4xl font-extrabold tracking-tight dark:text-white text-gray-900">
+                Сжать <span class="text-accent">картинки</span>
+            </h1>
+            <p class="description mt-2 text-sm dark:text-gray-500 text-gray-400 font-mono">до 50 файлов &middot; до 20 МБ каждый</p>
         </div>
-        <h1 class="text-3xl sm:text-4xl font-extrabold tracking-tight dark:text-white text-gray-900">
-            Сжать <span class="text-accent">картинки</span>
-        </h1>
-        <p class="mt-2 text-sm dark:text-gray-500 text-gray-400 font-mono">до 50 файлов &middot; до 20 МБ каждый</p>
     </div>
 
     <!-- Main Card -->
@@ -314,17 +168,6 @@
 </div><!-- /main-content -->
 
 <script>
-// Theme toggle
-const html = document.documentElement;
-const savedTheme = localStorage.getItem('theme');
-if (savedTheme) { html.className = savedTheme; }
-else if (!window.matchMedia('(prefers-color-scheme: dark)').matches) { html.className = ''; }
-
-document.getElementById('themeToggle').addEventListener('click', () => {
-    const isDark = html.classList.toggle('dark');
-    localStorage.setItem('theme', isDark ? 'dark' : '');
-});
-
 const $ = id => document.getElementById(id);
 const dropzone = $('dropzone');
 const fileInput = $('fileInput');
diff --git a/public/converter.html b/public/converter.html
index 70a49f2..70eb570 100644
--- a/public/converter.html
+++ b/public/converter.html
@@ -3,55 +3,14 @@
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Converter — images.wadevelop.ru</title>
+    <title>Format Converter — WA Dev Tools</title>
     <script src="/vendor/tailwind.js"></script>
+    <script>window.WA_TOOL_ID = 'converter';</script>
+    <script src="/shared.js"></script>
     <link href="/vendor/fonts.css" rel="stylesheet">
+    <link href="/shared.css" rel="stylesheet">
     <script src="/vendor/marked.min.js"></script>
-    <script>
-        tailwind.config = {
-            darkMode: 'class',
-            theme: {
-                extend: {
-                    fontFamily: {
-                        mono: ['JetBrains Mono', 'monospace'],
-                        sans: ['Manrope', 'sans-serif'],
-                    },
-                    colors: {
-                        surface: { 900: '#060c18', 800: '#091020', 700: '#0d1828', 600: '#162040' },
-                        accent: { DEFAULT: '#0054e6', dim: '#0043b8', bright: '#6b9fff' },
-                        warn: '#ffd600',
-                        danger: '#ff5252',
-                    }
-                }
-            }
-        }
-    </script>
     <style>
-        .sidebar{position:fixed;top:0;left:0;width:56px;height:100vh;display:flex;flex-direction:column;align-items:center;padding:16px 0 12px;z-index:50;border-right:1px solid var(--surface-600);background:var(--surface-800);backdrop-filter:blur(12px);transition:background .3s,border-color .3s}
-        .sidebar-logo{margin-bottom:24px;color:var(--text-muted);font-size:10px;font-weight:700;letter-spacing:.08em;font-family:'JetBrains Mono',monospace}
-        .sidebar-nav{display:flex;flex-direction:column;gap:6px;flex:1}
-        .sidebar-link{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);transition:all .2s;text-decoration:none;position:relative}
-        .sidebar-link:hover{color:var(--text-secondary);background:rgba(255,255,255,.04)}
-        .sidebar-link.active{color:#0054e6;background:rgba(0,84,230,.08)}
-        .sidebar-link.active::before{content:'';position:absolute;left:-8px;top:50%;transform:translateY(-50%);width:3px;height:20px;border-radius:0 3px 3px 0;background:#0054e6}
-        .sidebar-bottom{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:8px}
-        .main-content{margin-left:56px}
-        @media(max-width:640px){
-            .sidebar{position:fixed;top:auto;bottom:0;left:0;width:100%;height:52px;flex-direction:row;justify-content:center;padding:0 16px;border-right:none;border-top:1px solid var(--surface-600);gap:0}
-            .sidebar-logo{display:none}
-            .sidebar-nav{flex-direction:row;gap:4px;flex:none}
-            .sidebar-bottom{margin-top:0;margin-left:auto;flex-direction:row}
-            .sidebar-link.active::before{left:50%;top:auto;bottom:-6px;transform:translateX(-50%);width:20px;height:3px;border-radius:3px 3px 0 0}
-            .main-content{margin-left:0;padding-bottom:60px}
-        }
-        :root{--bg:#f5f5f7;--bg-grad1:rgba(0,67,184,.04);--bg-grad2:rgba(0,150,60,.03);--surface-800:rgba(255,255,255,0.85);--surface-700:#f0f0f3;--surface-600:#dde0e6;--text-primary:#1a1a2e;--text-secondary:#555;--text-muted:#888;--select-bg:#f0f0f3;--select-color:#1a1a2e}
-        .dark{--bg:#060c18;--bg-grad1:rgba(0,84,230,.03);--bg-grad2:rgba(0,67,184,.02);--surface-800:rgba(9,16,32,0.8);--surface-700:#0d1828;--surface-600:#162040;--text-primary:#fff;--text-secondary:#c0c0c0;--text-muted:#666;--select-bg:#091020;--select-color:#e0e0e0}
-        body{background:var(--bg);background-image:radial-gradient(ellipse at 20% 50%,var(--bg-grad1) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,var(--bg-grad2) 0%,transparent 50%);min-height:100vh;transition:background .3s}
-        .dark .noise::before{content:'';position:fixed;inset:0;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");pointer-events:none;z-index:0}
-        .theme-toggle{position:relative;width:44px;height:24px;border-radius:12px;cursor:pointer;transition:background .3s}
-        .dark .theme-toggle{background:#162040}.theme-toggle{background:#dde0e6}
-        .theme-toggle-knob{position:absolute;top:2px;width:20px;height:20px;border-radius:50%;transition:left .3s,background .3s;display:flex;align-items:center;justify-content:center}
-        .dark .theme-toggle-knob{left:22px;background:#0d1828}.theme-toggle-knob{left:2px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.15)}
         @keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.fade-up{animation:fadeUp .4s ease-out forwards}.fade-up-delay{animation:fadeUp .4s ease-out .1s forwards;opacity:0}
         .tool-btn{transition:all .2s}.tool-btn.active{color:#0054e6;background:rgba(0,84,230,.08);border-color:rgba(0,84,230,.3)}
         textarea{font-family:'JetBrains Mono',monospace;font-size:13px;resize:vertical}
@@ -59,43 +18,10 @@
 </head>
 <body class="noise dark:text-gray-200 text-gray-700 font-sans antialiased">
 
-<nav class="sidebar">
-    <div class="sidebar-logo">WA</div>
-    <div class="sidebar-nav">
-        <a href="/" class="sidebar-link" title="Главная"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/></svg></a>
-        <a href="/compress" class="sidebar-link" title="Картинки"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0023.25 18.75V5.25A2.25 2.25 0 0021 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z"/></svg></a>
-        <a href="/md" class="sidebar-link" title="Markdown"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/></svg></a>
-        <a href="/placeholder" class="sidebar-link" title="Placeholder"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714a2.25 2.25 0 00.659 1.591L19 14.5M14.25 3.104c.251.023.501.05.75.082M19 14.5l-2.47 2.47a2.25 2.25 0 01-1.59.659H9.06a2.25 2.25 0 01-1.591-.659L5 14.5m14 0V17a2.25 2.25 0 01-2.25 2.25H7.25A2.25 2.25 0 015 17v-2.5"/></svg></a>
-        <a href="/parser" class="sidebar-link" title="Parser"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m9.86-2.06a4.5 4.5 0 00-6.364-6.364L6.257 6.514a4.5 4.5 0 001.242 7.244"/></svg></a>
-        <a href="/password" class="sidebar-link" title="Password"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"/></svg></a>
-        <a href="/sanitizer" class="sidebar-link" title="Sanitizer"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg></a>
-        <a href="/converter" class="sidebar-link active" title="Converter"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"/></svg></a>
-        <a href="/formatter" class="sidebar-link" title="Formatter"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"/></svg></a>
-        <a href="/editor" class="sidebar-link" title="Editor"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"/></svg></a>
-        <a href="/httpclient" class="sidebar-link" title="HTTP Client">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"/></svg>
-        </a>
-        <a href="/redirects" class="sidebar-link" title="Redirect Analyzer">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg>
-        </a>
-        <a href="/svgeditor" class="sidebar-link" title="SVG Редактор">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 00-5.78 1.128 2.25 2.25 0 01-2.4 2.245 4.5 4.5 0 008.4-2.245c0-.399-.078-.78-.22-1.128zm0 0a15.998 15.998 0 003.388-1.62m-5.043-.025a15.994 15.994 0 011.622-3.395m3.42 3.42a15.995 15.995 0 004.764-4.648l3.876-5.814a1.151 1.151 0 00-1.597-1.597L14.146 6.32a15.996 15.996 0 00-4.649 4.763m3.42 3.42a6.776 6.776 0 00-3.42-3.42"/></svg>
-        </a>
-    </div>
-    <div class="sidebar-bottom">
-        <div class="theme-toggle" id="themeToggle" title="Переключить тему">
-            <div class="theme-toggle-knob">
-                <svg class="w-3 h-3 dark:hidden text-amber-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"/></svg>
-                <svg class="w-3 h-3 hidden dark:block text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/></svg>
-            </div>
-        </div>
-    </div>
-</nav>
-
 <div class="main-content">
-<div class="relative z-10 max-w-3xl mx-auto px-4 py-8 sm:py-12">
+<div class="tool-container relative z-10 max-w-3xl mx-auto px-4 py-8 sm:py-12">
 
-    <div class="text-center mb-8 fade-up">
+    <div class="page-header text-center mb-8 fade-up">
         <div class="inline-flex items-center gap-2 mb-3 px-3 py-1 rounded-full border dark:border-surface-600 border-gray-300 dark:bg-surface-800/60 bg-white/60 text-xs font-mono dark:text-gray-400 text-gray-500 tracking-wide">
             <span class="w-1.5 h-1.5 rounded-full bg-accent animate-pulse"></span>
             HTML &harr; Markdown
@@ -103,7 +29,7 @@
         <h1 class="text-3xl sm:text-4xl font-extrabold tracking-tight dark:text-white text-gray-900">
             Format <span class="text-accent">Converter</span>
         </h1>
-        <p class="mt-2 text-sm dark:text-gray-500 text-gray-400 font-mono">конвертация между HTML и Markdown</p>
+        <p class="description mt-2 text-sm dark:text-gray-500 text-gray-400 font-mono">конвертация между HTML и Markdown</p>
     </div>
 
     <!-- Tool Toggle -->
@@ -150,15 +76,6 @@
 </div>
 
 <script>
-const html = document.documentElement;
-const savedTheme = localStorage.getItem('theme');
-if (savedTheme) { html.className = savedTheme; }
-else if (!window.matchMedia('(prefers-color-scheme: dark)').matches) { html.className = ''; }
-document.getElementById('themeToggle').addEventListener('click', () => {
-    const isDark = html.classList.toggle('dark');
-    localStorage.setItem('theme', isDark ? 'dark' : '');
-});
-
 let activeTool = 'htmlToMd';
 const $ = id => document.getElementById(id);
 
diff --git a/public/editor.html b/public/editor.html
index db12347..73c9b5e 100644
--- a/public/editor.html
+++ b/public/editor.html
@@ -1,40 +1,18 @@
 <!DOCTYPE html>
 <html lang="ru" class="dark">
 <head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Editor — images.wadevelop.ru</title>
-<link href="/vendor/fonts.css" rel="stylesheet">
-<link rel="stylesheet" href="/editor.css">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Code Editor — WA Dev Tools</title>
+    <script src="/vendor/tailwind.js"></script>
+    <script>window.WA_TOOL_ID = 'editor';</script>
+    <script src="/shared.js"></script>
+    <link href="/vendor/fonts.css" rel="stylesheet">
+    <link href="/shared.css" rel="stylesheet">
+    <link rel="stylesheet" href="/editor.css">
 </head>
 <body>
 
-<!-- Sidebar -->
-<nav class="sidebar">
-    <div class="sidebar-logo">WA</div>
-    <div class="sidebar-nav">
-        <a href="/" class="sidebar-link" title="Главная"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/></svg></a>
-        <a href="/compress" class="sidebar-link" title="Картинки"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0023.25 18.75V5.25A2.25 2.25 0 0021 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z"/></svg></a>
-        <a href="/md" class="sidebar-link" title="Markdown"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/></svg></a>
-        <a href="/placeholder" class="sidebar-link" title="Placeholder"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714a2.25 2.25 0 00.659 1.591L19 14.5M14.25 3.104c.251.023.501.05.75.082M19 14.5l-2.47 2.47a2.25 2.25 0 01-1.59.659H9.06a2.25 2.25 0 01-1.591-.659L5 14.5m14 0V17a2.25 2.25 0 01-2.25 2.25H7.25A2.25 2.25 0 015 17v-2.5"/></svg></a>
-        <a href="/parser" class="sidebar-link" title="Parser"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m9.86-2.06a4.5 4.5 0 00-6.364-6.364L6.257 6.514a4.5 4.5 0 001.242 7.244"/></svg></a>
-        <a href="/password" class="sidebar-link" title="Password"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"/></svg></a>
-        <a href="/sanitizer" class="sidebar-link" title="Sanitizer"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg></a>
-        <a href="/converter" class="sidebar-link" title="Converter"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"/></svg></a>
-        <a href="/formatter" class="sidebar-link" title="Formatter"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"/></svg></a>
-        <a href="/editor" class="sidebar-link active" title="Editor"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"/></svg></a>
-        <a href="/httpclient" class="sidebar-link" title="HTTP Client">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"/></svg>
-        </a>
-        <a href="/redirects" class="sidebar-link" title="Redirect Analyzer">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg>
-        </a>
-        <a href="/svgeditor" class="sidebar-link" title="SVG Редактор">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 00-5.78 1.128 2.25 2.25 0 01-2.4 2.245 4.5 4.5 0 008.4-2.245c0-.399-.078-.78-.22-1.128zm0 0a15.998 15.998 0 003.388-1.62m-5.043-.025a15.994 15.994 0 011.622-3.395m3.42 3.42a15.995 15.995 0 004.764-4.648l3.876-5.814a1.151 1.151 0 00-1.597-1.597L14.146 6.32a15.996 15.996 0 00-4.649 4.763m3.42 3.42a6.776 6.776 0 00-3.42-3.42"/></svg>
-        </a>
-    </div>
-</nav>
-
 <!-- Editor -->
 <div class="editor-wrap">
     <!-- Toolbar -->
diff --git a/public/formatter.html b/public/formatter.html
index 9334841..cfc5e84 100644
--- a/public/formatter.html
+++ b/public/formatter.html
@@ -3,54 +3,13 @@
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Code Formatter — images.wadevelop.ru</title>
+    <title>Code Formatter — WA Dev Tools</title>
     <script src="/vendor/tailwind.js"></script>
+    <script>window.WA_TOOL_ID = 'formatter';</script>
+    <script src="/shared.js"></script>
     <link href="/vendor/fonts.css" rel="stylesheet">
-    <script>
-        tailwind.config = {
-            darkMode: 'class',
-            theme: {
-                extend: {
-                    fontFamily: {
-                        mono: ['JetBrains Mono', 'monospace'],
-                        sans: ['Manrope', 'sans-serif'],
-                    },
-                    colors: {
-                        surface: { 900: '#060c18', 800: '#091020', 700: '#0d1828', 600: '#162040' },
-                        accent: { DEFAULT: '#0054e6', dim: '#0043b8', bright: '#6b9fff' },
-                        warn: '#ffd600',
-                        danger: '#ff5252',
-                    }
-                }
-            }
-        }
-    </script>
+    <link href="/shared.css" rel="stylesheet">
     <style>
-        .sidebar{position:fixed;top:0;left:0;width:56px;height:100vh;display:flex;flex-direction:column;align-items:center;padding:16px 0 12px;z-index:50;border-right:1px solid var(--surface-600);background:var(--surface-800);backdrop-filter:blur(12px);transition:background .3s,border-color .3s}
-        .sidebar-logo{margin-bottom:24px;color:var(--text-muted);font-size:10px;font-weight:700;letter-spacing:.08em;font-family:'JetBrains Mono',monospace}
-        .sidebar-nav{display:flex;flex-direction:column;gap:6px;flex:1}
-        .sidebar-link{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);transition:all .2s;text-decoration:none;position:relative}
-        .sidebar-link:hover{color:var(--text-secondary);background:rgba(255,255,255,.04)}
-        .sidebar-link.active{color:#0054e6;background:rgba(0,84,230,.08)}
-        .sidebar-link.active::before{content:'';position:absolute;left:-8px;top:50%;transform:translateY(-50%);width:3px;height:20px;border-radius:0 3px 3px 0;background:#0054e6}
-        .sidebar-bottom{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:8px}
-        .main-content{margin-left:56px}
-        @media(max-width:640px){
-            .sidebar{position:fixed;top:auto;bottom:0;left:0;width:100%;height:52px;flex-direction:row;justify-content:center;padding:0 16px;border-right:none;border-top:1px solid var(--surface-600);gap:0}
-            .sidebar-logo{display:none}
-            .sidebar-nav{flex-direction:row;gap:4px;flex:none}
-            .sidebar-bottom{margin-top:0;margin-left:auto;flex-direction:row}
-            .sidebar-link.active::before{left:50%;top:auto;bottom:-6px;transform:translateX(-50%);width:20px;height:3px;border-radius:3px 3px 0 0}
-            .main-content{margin-left:0;padding-bottom:60px}
-        }
-        :root{--bg:#f5f5f7;--bg-grad1:rgba(0,67,184,.04);--bg-grad2:rgba(0,150,60,.03);--surface-800:rgba(255,255,255,0.85);--surface-700:#f0f0f3;--surface-600:#dde0e6;--text-primary:#1a1a2e;--text-secondary:#555;--text-muted:#888;--select-bg:#f0f0f3;--select-color:#1a1a2e}
-        .dark{--bg:#060c18;--bg-grad1:rgba(0,84,230,.03);--bg-grad2:rgba(0,67,184,.02);--surface-800:rgba(9,16,32,0.8);--surface-700:#0d1828;--surface-600:#162040;--text-primary:#fff;--text-secondary:#c0c0c0;--text-muted:#666;--select-bg:#091020;--select-color:#e0e0e0}
-        body{background:var(--bg);background-image:radial-gradient(ellipse at 20% 50%,var(--bg-grad1) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,var(--bg-grad2) 0%,transparent 50%);min-height:100vh;transition:background .3s}
-        .dark .noise::before{content:'';position:fixed;inset:0;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");pointer-events:none;z-index:0}
-        .theme-toggle{position:relative;width:44px;height:24px;border-radius:12px;cursor:pointer;transition:background .3s}
-        .dark .theme-toggle{background:#162040}.theme-toggle{background:#dde0e6}
-        .theme-toggle-knob{position:absolute;top:2px;width:20px;height:20px;border-radius:50%;transition:left .3s,background .3s;display:flex;align-items:center;justify-content:center}
-        .dark .theme-toggle-knob{left:22px;background:#0d1828}.theme-toggle-knob{left:2px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.15)}
         @keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.fade-up{animation:fadeUp .4s ease-out forwards}.fade-up-delay{animation:fadeUp .4s ease-out .1s forwards;opacity:0}
         .tool-btn{transition:all .2s}.tool-btn.active{color:#0054e6;background:rgba(0,84,230,.08);border-color:rgba(0,84,230,.3)}
         textarea{font-family:'JetBrains Mono',monospace;font-size:13px;resize:vertical}
@@ -58,43 +17,10 @@
 </head>
 <body class="noise dark:text-gray-200 text-gray-700 font-sans antialiased">
 
-<nav class="sidebar">
-    <div class="sidebar-logo">WA</div>
-    <div class="sidebar-nav">
-        <a href="/" class="sidebar-link" title="Главная"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/></svg></a>
-        <a href="/compress" class="sidebar-link" title="Картинки"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0023.25 18.75V5.25A2.25 2.25 0 0021 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z"/></svg></a>
-        <a href="/md" class="sidebar-link" title="Markdown"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/></svg></a>
-        <a href="/placeholder" class="sidebar-link" title="Placeholder"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714a2.25 2.25 0 00.659 1.591L19 14.5M14.25 3.104c.251.023.501.05.75.082M19 14.5l-2.47 2.47a2.25 2.25 0 01-1.59.659H9.06a2.25 2.25 0 01-1.591-.659L5 14.5m14 0V17a2.25 2.25 0 01-2.25 2.25H7.25A2.25 2.25 0 015 17v-2.5"/></svg></a>
-        <a href="/parser" class="sidebar-link" title="Parser"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m9.86-2.06a4.5 4.5 0 00-6.364-6.364L6.257 6.514a4.5 4.5 0 001.242 7.244"/></svg></a>
-        <a href="/password" class="sidebar-link" title="Password"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"/></svg></a>
-        <a href="/sanitizer" class="sidebar-link" title="Sanitizer"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg></a>
-        <a href="/converter" class="sidebar-link" title="Converter"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"/></svg></a>
-        <a href="/formatter" class="sidebar-link active" title="Formatter"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"/></svg></a>
-        <a href="/editor" class="sidebar-link" title="Editor"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"/></svg></a>
-        <a href="/httpclient" class="sidebar-link" title="HTTP Client">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"/></svg>
-        </a>
-        <a href="/redirects" class="sidebar-link" title="Redirect Analyzer">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg>
-        </a>
-        <a href="/svgeditor" class="sidebar-link" title="SVG Редактор">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 00-5.78 1.128 2.25 2.25 0 01-2.4 2.245 4.5 4.5 0 008.4-2.245c0-.399-.078-.78-.22-1.128zm0 0a15.998 15.998 0 003.388-1.62m-5.043-.025a15.994 15.994 0 011.622-3.395m3.42 3.42a15.995 15.995 0 004.764-4.648l3.876-5.814a1.151 1.151 0 00-1.597-1.597L14.146 6.32a15.996 15.996 0 00-4.649 4.763m3.42 3.42a6.776 6.776 0 00-3.42-3.42"/></svg>
-        </a>
-    </div>
-    <div class="sidebar-bottom">
-        <div class="theme-toggle" id="themeToggle" title="Переключить тему">
-            <div class="theme-toggle-knob">
-                <svg class="w-3 h-3 dark:hidden text-amber-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"/></svg>
-                <svg class="w-3 h-3 hidden dark:block text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/></svg>
-            </div>
-        </div>
-    </div>
-</nav>
-
 <div class="main-content">
-<div class="relative z-10 max-w-3xl mx-auto px-4 py-8 sm:py-12">
+<div class="tool-container relative z-10 max-w-3xl mx-auto px-4 py-8 sm:py-12">
 
-    <div class="text-center mb-8 fade-up">
+    <div class="page-header text-center mb-8 fade-up">
         <div class="inline-flex items-center gap-2 mb-3 px-3 py-1 rounded-full border dark:border-surface-600 border-gray-300 dark:bg-surface-800/60 bg-white/60 text-xs font-mono dark:text-gray-400 text-gray-500 tracking-wide">
             <span class="w-1.5 h-1.5 rounded-full bg-accent animate-pulse"></span>
             CSS &middot; JavaScript
@@ -102,7 +28,7 @@
         <h1 class="text-3xl sm:text-4xl font-extrabold tracking-tight dark:text-white text-gray-900">
             Code <span class="text-accent">Formatter</span>
         </h1>
-        <p class="mt-2 text-sm dark:text-gray-500 text-gray-400 font-mono">форматирование и beautify кода</p>
+        <p class="description mt-2 text-sm dark:text-gray-500 text-gray-400 font-mono">форматирование и beautify кода</p>
     </div>
 
     <!-- Tool Toggle -->
@@ -149,15 +75,6 @@
 </div>
 
 <script>
-const html = document.documentElement;
-const savedTheme = localStorage.getItem('theme');
-if (savedTheme) { html.className = savedTheme; }
-else if (!window.matchMedia('(prefers-color-scheme: dark)').matches) { html.className = ''; }
-document.getElementById('themeToggle').addEventListener('click', () => {
-    const isDark = html.classList.toggle('dark');
-    localStorage.setItem('theme', isDark ? 'dark' : '');
-});
-
 let activeTool = 'css';
 const $ = id => document.getElementById(id);
 
diff --git a/public/httpclient.html b/public/httpclient.html
index 7a1db5a..0f2f4fd 100644
--- a/public/httpclient.html
+++ b/public/httpclient.html
@@ -3,58 +3,14 @@
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>HTTP Client — images.wadevelop.ru</title>
+    <title>HTTP Client — WA Dev Tools</title>
     <script src="/vendor/tailwind.js"></script>
+    <script>window.WA_TOOL_ID = 'httpclient';</script>
+    <script src="/shared.js"></script>
     <link href="/vendor/fonts.css" rel="stylesheet">
+    <link href="/shared.css" rel="stylesheet">
     <link rel="stylesheet" href="/vendor/hljs-github-dark.css">
-    <script>
-        tailwind.config = {
-            darkMode: 'class',
-            theme: {
-                extend: {
-                    fontFamily: {
-                        mono: ['JetBrains Mono', 'monospace'],
-                        sans: ['Manrope', 'sans-serif'],
-                    },
-                    colors: {
-                        surface: { 900: '#060c18', 800: '#091020', 700: '#0d1828', 600: '#162040' },
-                        accent: { DEFAULT: '#0054e6', dim: '#0043b8', bright: '#6b9fff' },
-                        warn: '#ffd600',
-                        danger: '#ff5252',
-                    }
-                }
-            }
-        }
-    </script>
     <style>
-        .sidebar{position:fixed;top:0;left:0;width:56px;height:100vh;display:flex;flex-direction:column;align-items:center;padding:16px 0 12px;z-index:50;border-right:1px solid var(--surface-600);background:var(--surface-800);backdrop-filter:blur(12px);transition:background .3s,border-color .3s}
-        .sidebar-logo{margin-bottom:24px;color:var(--text-muted);font-size:10px;font-weight:700;letter-spacing:.08em;font-family:'JetBrains Mono',monospace}
-        .sidebar-nav{display:flex;flex-direction:column;gap:6px;flex:1}
-        .sidebar-link{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);transition:all .2s;text-decoration:none;position:relative}
-        .sidebar-link:hover{color:var(--text-secondary);background:rgba(255,255,255,.04)}
-        .sidebar-link.active{color:#0054e6;background:rgba(0,84,230,.08)}
-        .sidebar-link.active::before{content:'';position:absolute;left:-8px;top:50%;transform:translateY(-50%);width:3px;height:20px;border-radius:0 3px 3px 0;background:#0054e6}
-        .sidebar-bottom{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:8px}
-        .main-content{margin-left:56px}
-        @media(max-width:640px){
-            .sidebar{position:fixed;top:auto;bottom:0;left:0;width:100%;height:52px;flex-direction:row;justify-content:center;padding:0 16px;border-right:none;border-top:1px solid var(--surface-600);gap:0}
-            .sidebar-logo{display:none}
-            .sidebar-nav{flex-direction:row;gap:4px;flex:none}
-            .sidebar-bottom{margin-top:0;margin-left:auto;flex-direction:row}
-            .sidebar-link.active::before{left:50%;top:auto;bottom:-6px;transform:translateX(-50%);width:20px;height:3px;border-radius:3px 3px 0 0}
-            .main-content{margin-left:0;padding-bottom:60px}
-        }
-        :root{--bg:#f5f5f7;--bg-grad1:rgba(0,67,184,.04);--bg-grad2:rgba(0,50,140,.03);--surface-800:rgba(255,255,255,0.85);--surface-700:#f0f0f3;--surface-600:#dde0e6;--text-primary:#1a1a2e;--text-secondary:#555;--text-muted:#888;--select-bg:#fff;--select-color:#1a1a2e}
-        .dark{--bg:#060c18;--bg-grad1:rgba(0,84,230,.03);--bg-grad2:rgba(0,67,184,.02);--surface-800:rgba(9,16,32,0.8);--surface-700:#0d1828;--surface-600:#162040;--text-primary:#fff;--text-secondary:#c0c0c0;--text-muted:#666;--select-bg:#091020;--select-color:#e0e0e0}
-        body{background:var(--bg);background-image:radial-gradient(ellipse at 20% 50%,var(--bg-grad1) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,var(--bg-grad2) 0%,transparent 50%);min-height:100vh;transition:background .3s}
-        .dark .noise::before{content:'';position:fixed;inset:0;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");pointer-events:none;z-index:0}
-        .theme-toggle{position:relative;width:44px;height:24px;border-radius:12px;cursor:pointer;transition:background .3s}
-        .dark .theme-toggle{background:#162040}
-        .theme-toggle{background:#dde0e6}
-        .theme-toggle-knob{position:absolute;top:2px;width:20px;height:20px;border-radius:50%;transition:left .3s,background .3s;display:flex;align-items:center;justify-content:center}
-        .dark .theme-toggle-knob{left:22px;background:#0d1828}
-        .theme-toggle-knob{left:2px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.15)}
-
         /* HTTP Client UI */
         .panel {
             background: var(--surface-800);
@@ -259,73 +215,15 @@
 </head>
 <body class="noise dark:text-gray-200 text-gray-700 font-sans antialiased">
 
-<!-- Sidebar -->
-<nav class="sidebar">
-    <div class="sidebar-logo">WA</div>
-    <div class="sidebar-nav">
-        <a href="/" class="sidebar-link" title="Главная">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/></svg>
-        </a>
-        <a href="/compress" class="sidebar-link" title="Картинки">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0023.25 18.75V5.25A2.25 2.25 0 0021 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z"/></svg>
-        </a>
-        <a href="/md" class="sidebar-link" title="Markdown">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/></svg>
-        </a>
-        <a href="/placeholder" class="sidebar-link" title="Placeholder">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714a2.25 2.25 0 00.659 1.591L19 14.5M14.25 3.104c.251.023.501.05.75.082M19 14.5l-2.47 2.47a2.25 2.25 0 01-1.59.659H9.06a2.25 2.25 0 01-1.591-.659L5 14.5m14 0V17a2.25 2.25 0 01-2.25 2.25H7.25A2.25 2.25 0 015 17v-2.5"/></svg>
-        </a>
-        <a href="/parser" class="sidebar-link" title="Parser">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m9.86-2.06a4.5 4.5 0 00-6.364-6.364L6.257 6.514a4.5 4.5 0 001.242 7.244"/></svg>
-        </a>
-        <a href="/password" class="sidebar-link" title="Password">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"/></svg>
-        </a>
-        <a href="/sanitizer" class="sidebar-link" title="Sanitizer">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
-        </a>
-        <a href="/converter" class="sidebar-link" title="Converter">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"/></svg>
-        </a>
-        <a href="/formatter" class="sidebar-link" title="Formatter">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"/></svg>
-        </a>
-        <a href="/editor" class="sidebar-link" title="Editor">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"/></svg>
-        </a>
-        <a href="/httpclient" class="sidebar-link active" title="HTTP Client">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"/></svg>
-        </a>
-        <a href="/redirects" class="sidebar-link" title="Redirect Analyzer">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg>
-        </a>
-        <a href="/svgeditor" class="sidebar-link" title="SVG Редактор">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 00-5.78 1.128 2.25 2.25 0 01-2.4 2.245 4.5 4.5 0 008.4-2.245c0-.399-.078-.78-.22-1.128zm0 0a15.998 15.998 0 003.388-1.62m-5.043-.025a15.994 15.994 0 011.622-3.395m3.42 3.42a15.995 15.995 0 004.764-4.648l3.876-5.814a1.151 1.151 0 00-1.597-1.597L14.146 6.32a15.996 15.996 0 00-4.649 4.763m3.42 3.42a6.776 6.776 0 00-3.42-3.42"/></svg>
-        </a>
-    </div>
-    <div class="sidebar-bottom">
-        <div class="theme-toggle" id="themeToggle" title="Переключить тему">
-            <div class="theme-toggle-knob">
-                <svg class="w-3 h-3 dark:hidden text-amber-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"/></svg>
-                <svg class="w-3 h-3 hidden dark:block text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/></svg>
-            </div>
-        </div>
-    </div>
-</nav>
-
 <div class="main-content">
-<div class="relative z-10 max-w-7xl mx-auto px-4 py-6">
+<div class="tool-container relative z-10 max-w-7xl mx-auto px-4">
 
     <!-- Header -->
-    <div class="mb-8 text-center">
-        <div class="inline-flex items-center gap-2 mb-3 px-3 py-1 rounded-full border dark:border-surface-600 border-gray-300 dark:bg-surface-800/60 bg-white/60 text-xs font-mono dark:text-gray-400 text-gray-500 tracking-wide">
-            <span class="w-1.5 h-1.5 rounded-full bg-accent animate-pulse"></span>
-            GET · POST · PUT · DELETE
-        </div>
+    <div class="page-header">
         <h1 class="text-3xl sm:text-4xl font-extrabold tracking-tight dark:text-white text-gray-900">
             HTTP <span class="text-accent">Клиент</span>
         </h1>
-        <p class="mt-2 text-sm dark:text-gray-500 text-gray-400 font-mono">тест API запросов</p>
+        <p class="description mt-2 text-sm dark:text-gray-500 text-gray-400 font-mono">тест API запросов</p>
     </div>
 
     <!-- URL Bar -->
@@ -465,16 +363,6 @@
 <script src="/vendor/highlight.min.js"></script>
 <script>
 (() => {
-    // Theme
-    const html = document.documentElement;
-    const savedTheme = localStorage.getItem('theme');
-    if (savedTheme) html.className = savedTheme;
-    else if (!window.matchMedia('(prefers-color-scheme: dark)').matches) html.className = '';
-    document.getElementById('themeToggle').addEventListener('click', () => {
-        const isDark = html.classList.toggle('dark');
-        localStorage.setItem('theme', isDark ? 'dark' : '');
-    });
-
     // State
     let reqTabs = {}, resTabs = {};
     let isLoading = false;
@@ -568,7 +456,7 @@
             document.getElementById('urlInput').value = url;
         }
 
-        // Params → append to URL
+        // Params -> append to URL
         const params = getKvRows(paramsRows);
         if (Object.keys(params).length > 0) {
             try {
diff --git a/public/index.html b/public/index.html
index a422ce0..a9d8663 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,102 +5,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>WA Dev Tools — Инструменты</title>
     <script src="/vendor/tailwind.js"></script>
+    <script src="/shared.js"></script>
     <link href="/vendor/fonts.css" rel="stylesheet">
-    <script>
-        tailwind.config = {
-            darkMode: 'class',
-            theme: {
-                extend: {
-                    fontFamily: {
-                        mono: ['JetBrains Mono', 'monospace'],
-                        sans: ['Manrope', 'sans-serif'],
-                    },
-                    colors: {
-                        surface: { 900: '#060c18', 800: '#091020', 700: '#0d1828', 600: '#162040' },
-                        accent: { DEFAULT: '#0054e6', dim: '#0043b8', bright: '#6b9fff' },
-                        warn: '#ffd600',
-                        danger: '#ff5252',
-                    }
-                }
-            }
-        }
-    </script>
+    <link href="/shared.css" rel="stylesheet">
+    <script>window.WA_TOOL_ID = 'home';</script>
     <style>
-        /* Sidebar */
-        .sidebar{position:fixed;top:0;left:0;width:56px;height:100vh;display:flex;flex-direction:column;align-items:center;padding:16px 0 12px;z-index:50;border-right:1px solid var(--surface-600);background:var(--surface-800);backdrop-filter:blur(12px);transition:background .3s,border-color .3s}
-        .sidebar-logo{margin-bottom:24px;color:var(--text-muted);font-size:10px;font-weight:700;letter-spacing:.08em;font-family:'JetBrains Mono',monospace}
-        .sidebar-nav{display:flex;flex-direction:column;gap:6px;flex:1}
-        .sidebar-link{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);transition:all .2s;text-decoration:none;position:relative}
-        .sidebar-link:hover{color:var(--text-secondary);background:rgba(255,255,255,.04)}
-        .sidebar-link.active{color:#0054e6;background:rgba(0,84,230,.08)}
-        .sidebar-link.active::before{content:'';position:absolute;left:-8px;top:50%;transform:translateY(-50%);width:3px;height:20px;border-radius:0 3px 3px 0;background:#0054e6}
-        .sidebar-bottom{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:8px}
-        .main-content{margin-left:56px}
-
-        /* Mobile bottom bar */
-        @media(max-width:640px){
-            .sidebar{position:fixed;top:auto;bottom:0;left:0;width:100%;height:52px;flex-direction:row;justify-content:center;padding:0 16px;border-right:none;border-top:1px solid var(--surface-600);gap:0}
-            .sidebar-logo{display:none}
-            .sidebar-nav{flex-direction:row;gap:4px;flex:none}
-            .sidebar-bottom{margin-top:0;margin-left:auto;flex-direction:row}
-            .sidebar-link.active::before{left:50%;top:auto;bottom:-6px;transform:translateX(-50%);width:20px;height:3px;border-radius:3px 3px 0 0}
-            .main-content{margin-left:0;padding-bottom:60px}
-        }
-
-        /* Theme variables */
-        :root {
-            --bg: #f5f5f7;
-            --bg-grad1: rgba(0, 67, 184, 0.04);
-            --bg-grad2: rgba(0, 50, 140, 0.03);
-            --surface-800: rgba(255,255,255,0.85);
-            --surface-700: #f0f0f3;
-            --surface-600: #dde0e6;
-            --text-primary: #1a1a2e;
-            --text-secondary: #555;
-            --text-muted: #888;
-            --bar-bg: #e0e0e0;
-            --select-bg: #f0f0f3;
-            --select-color: #1a1a2e;
-        }
-        .dark {
-            --bg: #060c18;
-            --bg-grad1: rgba(0, 84, 230, 0.03);
-            --bg-grad2: rgba(0, 67, 184, 0.02);
-            --surface-800: rgba(9,16,32,0.8);
-            --surface-700: #0d1828;
-            --surface-600: #162040;
-            --text-primary: #fff;
-            --text-secondary: #c0c0c0;
-            --text-muted: #666;
-            --bar-bg: #0d1828;
-            --select-bg: #091020;
-            --select-color: #e0e0e0;
-        }
-        body {
-            background: var(--bg);
-            background-image:
-                radial-gradient(ellipse at 20% 50%, var(--bg-grad1) 0%, transparent 50%),
-                radial-gradient(ellipse at 80% 20%, var(--bg-grad2) 0%, transparent 50%);
-            min-height: 100vh;
-            transition: background 0.3s;
-        }
-        .dark .noise::before {
-            content: '';
-            position: fixed;
-            inset: 0;
-            background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
-            pointer-events: none;
-            z-index: 0;
-        }
-
-        /* Theme toggle */
-        .theme-toggle { position: relative; width: 44px; height: 24px; border-radius: 12px; cursor: pointer; transition: background 0.3s; }
-        .dark .theme-toggle { background: #162040; }
-        .theme-toggle { background: #dde0e6; }
-        .theme-toggle-knob { position: absolute; top: 2px; width: 20px; height: 20px; border-radius: 50%; transition: left 0.3s, background 0.3s; display: flex; align-items: center; justify-content: center; }
-        .dark .theme-toggle-knob { left: 22px; background: #0d1828; }
-        .theme-toggle-knob { left: 2px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
-
         @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
         .fade-up { animation: fadeUp 0.4s ease-out forwards; }
         .fade-up-delay { animation: fadeUp 0.4s ease-out 0.1s forwards; opacity: 0; }
@@ -142,73 +51,17 @@
 </head>
 <body class="noise dark:text-gray-200 text-gray-700 font-sans antialiased">
 
-<!-- Sidebar -->
-<nav class="sidebar">
-    <div class="sidebar-logo">WA</div>
-    <div class="sidebar-nav">
-        <a href="/" class="sidebar-link active" title="Главная">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/></svg>
-        </a>
-        <a href="/compress" class="sidebar-link" title="Картинки">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0023.25 18.75V5.25A2.25 2.25 0 0021 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z"/></svg>
-        </a>
-        <a href="/md" class="sidebar-link" title="Markdown">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/></svg>
-        </a>
-        <a href="/placeholder" class="sidebar-link" title="Placeholder">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714a2.25 2.25 0 00.659 1.591L19 14.5M14.25 3.104c.251.023.501.05.75.082M19 14.5l-2.47 2.47a2.25 2.25 0 01-1.59.659H9.06a2.25 2.25 0 01-1.591-.659L5 14.5m14 0V17a2.25 2.25 0 01-2.25 2.25H7.25A2.25 2.25 0 015 17v-2.5"/></svg>
-        </a>
-        <a href="/parser" class="sidebar-link" title="Parser">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m9.86-2.06a4.5 4.5 0 00-6.364-6.364L6.257 6.514a4.5 4.5 0 001.242 7.244"/></svg>
-        </a>
-        <a href="/password" class="sidebar-link" title="Password">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"/></svg>
-        </a>
-        <a href="/sanitizer" class="sidebar-link" title="Sanitizer">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
-        </a>
-        <a href="/converter" class="sidebar-link" title="Converter">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"/></svg>
-        </a>
-        <a href="/formatter" class="sidebar-link" title="Formatter">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"/></svg>
-        </a>
-        <a href="/editor" class="sidebar-link" title="Editor">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"/></svg>
-        </a>
-        <a href="/httpclient" class="sidebar-link" title="HTTP Client">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"/></svg>
-        </a>
-        <a href="/redirects" class="sidebar-link" title="Redirect Analyzer">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg>
-        </a>
-        <a href="/svgeditor" class="sidebar-link" title="SVG Редактор">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 00-5.78 1.128 2.25 2.25 0 01-2.4 2.245 4.5 4.5 0 008.4-2.245c0-.399-.078-.78-.22-1.128zm0 0a15.998 15.998 0 003.388-1.62m-5.043-.025a15.994 15.994 0 011.622-3.395m3.42 3.42a15.995 15.995 0 004.764-4.648l3.876-5.814a1.151 1.151 0 00-1.597-1.597L14.146 6.32a15.996 15.996 0 00-4.649 4.763m3.42 3.42a6.776 6.776 0 00-3.42-3.42"/></svg>
-        </a>
-    </div>
-    <div class="sidebar-bottom">
-        <div class="theme-toggle" id="themeToggle" title="Переключить тему">
-            <div class="theme-toggle-knob">
-                <svg class="w-3 h-3 dark:hidden text-amber-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"/></svg>
-                <svg class="w-3 h-3 hidden dark:block text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/></svg>
-            </div>
-        </div>
-    </div>
-</nav>
-
 <div class="main-content">
-<div class="relative z-10 max-w-5xl mx-auto px-4 py-8 sm:py-12">
+<div class="tool-container relative z-10 max-w-5xl mx-auto py-8 sm:py-12">
 
     <!-- Header -->
     <div class="mb-10 fade-up">
-        <div class="inline-flex items-center gap-2 mb-3 px-3 py-1 rounded-full border dark:border-surface-600 border-gray-300 dark:bg-surface-800/60 bg-white/60 text-xs font-mono dark:text-gray-400 text-gray-500 tracking-wide">
-            <span class="w-1.5 h-1.5 rounded-full bg-accent animate-pulse"></span>
-            images.wadevelop.ru
+        <div class="page-header">
+            <h1 class="text-3xl sm:text-4xl font-extrabold tracking-tight dark:text-white text-gray-900">
+                WA Dev <span class="text-accent">Tools</span>
+            </h1>
+            <p class="description mt-2 text-sm dark:text-gray-500 text-gray-400 font-mono">Инструменты разработчика</p>
         </div>
-        <h1 class="text-3xl sm:text-4xl font-extrabold tracking-tight dark:text-white text-gray-900">
-            WA Dev <span class="text-accent">Tools</span>
-        </h1>
-        <p class="mt-2 text-sm dark:text-gray-500 text-gray-400 font-mono">Инструменты разработчика</p>
     </div>
 
     <!-- Tools Grid -->
@@ -339,17 +192,5 @@
 </div>
 </div><!-- /main-content -->
 
-<script>
-// Theme toggle
-const html = document.documentElement;
-const savedTheme = localStorage.getItem('theme');
-if (savedTheme) { html.className = savedTheme; }
-else if (!window.matchMedia('(prefers-color-scheme: dark)').matches) { html.className = ''; }
-
-document.getElementById('themeToggle').addEventListener('click', () => {
-    const isDark = html.classList.toggle('dark');
-    localStorage.setItem('theme', isDark ? 'dark' : '');
-});
-</script>
 </body>
 </html>
diff --git a/public/md.html b/public/md.html
index d81b4f1..4fb064d 100644
--- a/public/md.html
+++ b/public/md.html
@@ -3,99 +3,16 @@
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Markdown Viewer</title>
+    <title>Markdown Viewer — WA Dev Tools</title>
     <script src="/vendor/tailwind.js"></script>
+    <script>window.WA_TOOL_ID = 'md';</script>
+    <script src="/shared.js"></script>
     <link href="/vendor/fonts.css" rel="stylesheet">
+    <link href="/shared.css" rel="stylesheet">
     <script src="/vendor/marked.min.js"></script>
     <script src="/vendor/highlight.min.js"></script>
     <link id="hljsTheme" href="/vendor/hljs-github-dark.css" rel="stylesheet">
-    <script>
-        tailwind.config = {
-            darkMode: 'class',
-            theme: {
-                extend: {
-                    fontFamily: {
-                        mono: ['JetBrains Mono', 'monospace'],
-                        sans: ['Manrope', 'sans-serif'],
-                    },
-                    colors: {
-                        surface: { 900: '#060c18', 800: '#091020', 700: '#0d1828', 600: '#162040' },
-                        accent: { DEFAULT: '#0054e6', dim: '#0043b8', bright: '#6b9fff' },
-                        warn: '#ffd600',
-                        danger: '#ff5252',
-                    }
-                }
-            }
-        }
-    </script>
     <style>
-        /* Sidebar */
-        .sidebar{position:fixed;top:0;left:0;width:56px;height:100vh;display:flex;flex-direction:column;align-items:center;padding:16px 0 12px;z-index:50;border-right:1px solid var(--surface-600);background:var(--surface-800);backdrop-filter:blur(12px);transition:background .3s,border-color .3s}
-        .sidebar-logo{margin-bottom:24px;color:var(--text-muted);font-size:10px;font-weight:700;letter-spacing:.08em;font-family:'JetBrains Mono',monospace}
-        .sidebar-nav{display:flex;flex-direction:column;gap:6px;flex:1}
-        .sidebar-link{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);transition:all .2s;text-decoration:none;position:relative}
-        .sidebar-link:hover{color:var(--text-secondary);background:rgba(255,255,255,.04)}
-        .sidebar-link.active{color:#0054e6;background:rgba(0,84,230,.08)}
-        .sidebar-link.active::before{content:'';position:absolute;left:-8px;top:50%;transform:translateY(-50%);width:3px;height:20px;border-radius:0 3px 3px 0;background:#0054e6}
-        .sidebar-bottom{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:8px}
-        .main-content{margin-left:56px}
-        @media(max-width:640px){
-            .sidebar{position:fixed;top:auto;bottom:0;left:0;width:100%;height:52px;flex-direction:row;justify-content:center;padding:0 16px;border-right:none;border-top:1px solid var(--surface-600);gap:0}
-            .sidebar-logo{display:none}
-            .sidebar-nav{flex-direction:row;gap:4px;flex:none}
-            .sidebar-bottom{margin-top:0;margin-left:auto;flex-direction:row}
-            .sidebar-link.active::before{left:50%;top:auto;bottom:-6px;transform:translateX(-50%);width:20px;height:3px;border-radius:3px 3px 0 0}
-            .main-content{margin-left:0;padding-bottom:60px}
-        }
-
-        /* Theme variables */
-        :root {
-            --bg: #f5f5f7;
-            --bg-grad1: rgba(0, 67, 184, 0.04);
-            --bg-grad2: rgba(0, 50, 140, 0.03);
-            --surface-800: rgba(255,255,255,0.85);
-            --surface-700: #f0f0f3;
-            --surface-600: #dde0e6;
-            --text-primary: #1a1a2e;
-            --text-secondary: #555;
-            --text-muted: #888;
-        }
-        .dark {
-            --bg: #060c18;
-            --bg-grad1: rgba(0, 84, 230, 0.03);
-            --bg-grad2: rgba(0, 67, 184, 0.02);
-            --surface-800: rgba(9,16,32,0.8);
-            --surface-700: #0d1828;
-            --surface-600: #162040;
-            --text-primary: #fff;
-            --text-secondary: #c0c0c0;
-            --text-muted: #666;
-        }
-        body {
-            background: var(--bg);
-            background-image:
-                radial-gradient(ellipse at 20% 50%, var(--bg-grad1) 0%, transparent 50%),
-                radial-gradient(ellipse at 80% 20%, var(--bg-grad2) 0%, transparent 50%);
-            min-height: 100vh;
-            transition: background 0.3s;
-        }
-        .dark .noise::before {
-            content: '';
-            position: fixed;
-            inset: 0;
-            background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
-            pointer-events: none;
-            z-index: 0;
-        }
-
-        /* Theme toggle */
-        .theme-toggle { position: relative; width: 44px; height: 24px; border-radius: 12px; cursor: pointer; transition: background 0.3s; }
-        .dark .theme-toggle { background: #162040; }
-        .theme-toggle { background: #dde0e6; }
-        .theme-toggle-knob { position: absolute; top: 2px; width: 20px; height: 20px; border-radius: 50%; transition: left 0.3s, background 0.3s; display: flex; align-items: center; justify-content: center; }
-        .dark .theme-toggle-knob { left: 22px; background: #0d1828; }
-        .theme-toggle-knob { left: 2px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
-
         /* Dropzone */
         .md-dropzone { border: 2px dashed var(--surface-600); transition: all .3s; }
         .md-dropzone.active { border-color: #0054e6; background: rgba(0,84,230,.05); }
@@ -126,10 +43,6 @@
         .md-output hr { border: none; border-top: 1px solid var(--surface-600); margin: 1.5em 0; }
         .md-output img { max-width: 100%; border-radius: 8px; margin: .8em 0; }
 
-        @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
-        .fade-up { animation: fadeUp 0.4s ease-out forwards; }
-        .fade-up-delay { animation: fadeUp 0.4s ease-out 0.1s forwards; opacity: 0; }
-
         /* Tabs */
         .tab-btn { transition: all .2s; }
         .tab-btn.active { color: #0054e6; border-color: #0054e6; }
@@ -137,62 +50,8 @@
 </head>
 <body class="noise dark:text-gray-200 text-gray-700 font-sans antialiased">
 
-<!-- Sidebar -->
-<nav class="sidebar">
-    <div class="sidebar-logo">WA</div>
-    <div class="sidebar-nav">
-        <a href="/" class="sidebar-link" title="Главная">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/></svg>
-        </a>
-        <a href="/compress" class="sidebar-link" title="Картинки">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0023.25 18.75V5.25A2.25 2.25 0 0021 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z"/></svg>
-        </a>
-        <a href="/md" class="sidebar-link active" title="Markdown">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/></svg>
-        </a>
-        <a href="/placeholder" class="sidebar-link" title="Placeholder">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714a2.25 2.25 0 00.659 1.591L19 14.5M14.25 3.104c.251.023.501.05.75.082M19 14.5l-2.47 2.47a2.25 2.25 0 01-1.59.659H9.06a2.25 2.25 0 01-1.591-.659L5 14.5m14 0V17a2.25 2.25 0 01-2.25 2.25H7.25A2.25 2.25 0 015 17v-2.5"/></svg>
-        </a>
-        <a href="/parser" class="sidebar-link" title="Parser">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m9.86-2.06a4.5 4.5 0 00-6.364-6.364L6.257 6.514a4.5 4.5 0 001.242 7.244"/></svg>
-        </a>
-        <a href="/password" class="sidebar-link" title="Password">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"/></svg>
-        </a>
-        <a href="/sanitizer" class="sidebar-link" title="Sanitizer">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
-        </a>
-        <a href="/converter" class="sidebar-link" title="Converter">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"/></svg>
-        </a>
-        <a href="/formatter" class="sidebar-link" title="Formatter">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"/></svg>
-        </a>
-        <a href="/editor" class="sidebar-link" title="Editor">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"/></svg>
-        </a>
-        <a href="/httpclient" class="sidebar-link" title="HTTP Client">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"/></svg>
-        </a>
-        <a href="/redirects" class="sidebar-link" title="Redirect Analyzer">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg>
-        </a>
-        <a href="/svgeditor" class="sidebar-link" title="SVG Редактор">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 00-5.78 1.128 2.25 2.25 0 01-2.4 2.245 4.5 4.5 0 008.4-2.245c0-.399-.078-.78-.22-1.128zm0 0a15.998 15.998 0 003.388-1.62m-5.043-.025a15.994 15.994 0 011.622-3.395m3.42 3.42a15.995 15.995 0 004.764-4.648l3.876-5.814a1.151 1.151 0 00-1.597-1.597L14.146 6.32a15.996 15.996 0 00-4.649 4.763m3.42 3.42a6.776 6.776 0 00-3.42-3.42"/></svg>
-        </a>
-    </div>
-    <div class="sidebar-bottom">
-        <div class="theme-toggle" id="themeToggle" title="Переключить тему">
-            <div class="theme-toggle-knob">
-                <svg class="w-3 h-3 dark:hidden text-amber-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"/></svg>
-                <svg class="w-3 h-3 hidden dark:block text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/></svg>
-            </div>
-        </div>
-    </div>
-</nav>
-
 <div class="main-content">
-<div class="relative z-10 max-w-4xl mx-auto px-4 py-8 sm:py-12">
+<div class="tool-container relative z-10 max-w-4xl mx-auto">
 
     <!-- Header -->
     <div class="text-center mb-8 fade-up">
@@ -200,10 +59,12 @@
             <span class="w-1.5 h-1.5 rounded-full bg-accent animate-pulse"></span>
             MD Viewer
         </div>
-        <h1 class="text-3xl sm:text-4xl font-extrabold tracking-tight dark:text-white text-gray-900">
-            Просмотр <span class="text-accent">Markdown</span>
-        </h1>
-        <p class="mt-2 text-sm dark:text-gray-500 text-gray-400 font-mono">drag-drop файл или вставьте текст</p>
+        <div class="page-header">
+            <h1 class="text-3xl sm:text-4xl font-extrabold tracking-tight dark:text-white text-gray-900">
+                Просмотр <span class="text-accent">Markdown</span>
+            </h1>
+            <p class="description mt-2 text-sm dark:text-gray-500 text-gray-400 font-mono">drag-drop файл или вставьте текст</p>
+        </div>
     </div>
 
     <!-- Input Card -->
@@ -269,23 +130,17 @@
 </div><!-- /main-content -->
 
 <script>
-// Theme
-const html = document.documentElement;
-const savedTheme = localStorage.getItem('theme');
-if (savedTheme) { html.className = savedTheme; }
-else if (!window.matchMedia('(prefers-color-scheme: dark)').matches) { html.className = ''; }
-
 function applyHljsTheme() {
-    const isDark = html.classList.contains('dark');
+    const isDark = document.documentElement.classList.contains('dark');
     document.getElementById('hljsTheme').href = isDark ? '/vendor/hljs-github-dark.css' : '/vendor/hljs-github.css';
 }
 applyHljsTheme();
 
-document.getElementById('themeToggle').addEventListener('click', () => {
-    const isDark = html.classList.toggle('dark');
-    localStorage.setItem('theme', isDark ? 'dark' : '');
-    applyHljsTheme();
-});
+// Listen for theme changes from shared.js
+document.addEventListener('themeChanged', applyHljsTheme);
+// Also observe class changes on html element for theme toggle
+const observer = new MutationObserver(applyHljsTheme);
+observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
 
 // Tabs
 document.querySelectorAll('.tab-btn').forEach(btn => {
diff --git a/public/parser.html b/public/parser.html
index 46b128e..0520901 100644
--- a/public/parser.html
+++ b/public/parser.html
@@ -3,101 +3,13 @@
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>URL Parser — images.wadevelop.ru</title>
+    <title>Парсер статей — WA Dev Tools</title>
     <script src="/vendor/tailwind.js"></script>
+    <script>window.WA_TOOL_ID = 'parser';</script>
+    <script src="/shared.js"></script>
     <link href="/vendor/fonts.css" rel="stylesheet">
-    <script>
-        tailwind.config = {
-            darkMode: 'class',
-            theme: {
-                extend: {
-                    fontFamily: {
-                        mono: ['JetBrains Mono', 'monospace'],
-                        sans: ['Manrope', 'sans-serif'],
-                    },
-                    colors: {
-                        surface: { 900: '#060c18', 800: '#091020', 700: '#0d1828', 600: '#162040' },
-                        accent: { DEFAULT: '#0054e6', dim: '#0043b8', bright: '#6b9fff' },
-                        warn: '#ffd600',
-                        danger: '#ff5252',
-                    }
-                }
-            }
-        }
-    </script>
+    <link href="/shared.css" rel="stylesheet">
     <style>
-        /* Sidebar */
-        .sidebar{position:fixed;top:0;left:0;width:56px;height:100vh;display:flex;flex-direction:column;align-items:center;padding:16px 0 12px;z-index:50;border-right:1px solid var(--surface-600);background:var(--surface-800);backdrop-filter:blur(12px);transition:background .3s,border-color .3s}
-        .sidebar-logo{margin-bottom:24px;color:var(--text-muted);font-size:10px;font-weight:700;letter-spacing:.08em;font-family:'JetBrains Mono',monospace}
-        .sidebar-nav{display:flex;flex-direction:column;gap:6px;flex:1}
-        .sidebar-link{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);transition:all .2s;text-decoration:none;position:relative}
-        .sidebar-link:hover{color:var(--text-secondary);background:rgba(255,255,255,.04)}
-        .sidebar-link.active{color:#0054e6;background:rgba(0,84,230,.08)}
-        .sidebar-link.active::before{content:'';position:absolute;left:-8px;top:50%;transform:translateY(-50%);width:3px;height:20px;border-radius:0 3px 3px 0;background:#0054e6}
-        .sidebar-bottom{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:8px}
-        .main-content{margin-left:56px}
-        @media(max-width:640px){
-            .sidebar{position:fixed;top:auto;bottom:0;left:0;width:100%;height:52px;flex-direction:row;justify-content:center;padding:0 16px;border-right:none;border-top:1px solid var(--surface-600);gap:0}
-            .sidebar-logo{display:none}
-            .sidebar-nav{flex-direction:row;gap:4px;flex:none}
-            .sidebar-bottom{margin-top:0;margin-left:auto;flex-direction:row}
-            .sidebar-link.active::before{left:50%;top:auto;bottom:-6px;transform:translateX(-50%);width:20px;height:3px;border-radius:3px 3px 0 0}
-            .main-content{margin-left:0;padding-bottom:60px}
-        }
-
-        :root {
-            --bg: #f5f5f7;
-            --bg-grad1: rgba(0, 67, 184, 0.04);
-            --bg-grad2: rgba(0, 50, 140, 0.03);
-            --surface-800: rgba(255,255,255,0.85);
-            --surface-700: #f0f0f3;
-            --surface-600: #dde0e6;
-            --text-primary: #1a1a2e;
-            --text-secondary: #555;
-            --text-muted: #888;
-            --select-bg: #f0f0f3;
-            --select-color: #1a1a2e;
-        }
-        .dark {
-            --bg: #060c18;
-            --bg-grad1: rgba(0, 84, 230, 0.03);
-            --bg-grad2: rgba(0, 67, 184, 0.02);
-            --surface-800: rgba(9,16,32,0.8);
-            --surface-700: #0d1828;
-            --surface-600: #162040;
-            --text-primary: #fff;
-            --text-secondary: #c0c0c0;
-            --text-muted: #666;
-            --select-bg: #091020;
-            --select-color: #e0e0e0;
-        }
-        body {
-            background: var(--bg);
-            background-image:
-                radial-gradient(ellipse at 20% 50%, var(--bg-grad1) 0%, transparent 50%),
-                radial-gradient(ellipse at 80% 20%, var(--bg-grad2) 0%, transparent 50%);
-            min-height: 100vh;
-            transition: background 0.3s;
-        }
-        .dark .noise::before {
-            content: '';
-            position: fixed;
-            inset: 0;
-            background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
-            pointer-events: none;
-            z-index: 0;
-        }
-
-        .theme-toggle { position: relative; width: 44px; height: 24px; border-radius: 12px; cursor: pointer; transition: background 0.3s; }
-        .dark .theme-toggle { background: #162040; }
-        .theme-toggle { background: #dde0e6; }
-        .theme-toggle-knob { position: absolute; top: 2px; width: 20px; height: 20px; border-radius: 50%; transition: left 0.3s, background 0.3s; display: flex; align-items: center; justify-content: center; }
-        .dark .theme-toggle-knob { left: 22px; background: #0d1828; }
-        .theme-toggle-knob { left: 2px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
-
-        @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
-        .fade-up { animation: fadeUp 0.4s ease-out forwards; }
-        .fade-up-delay { animation: fadeUp 0.4s ease-out 0.1s forwards; opacity: 0; }
         @keyframes pulse-border { 0%, 100% { border-color: rgba(0, 84, 230, 0.2); } 50% { border-color: rgba(0, 84, 230, 0.5); } }
         .processing { animation: pulse-border 1.5s ease-in-out infinite; }
 
@@ -126,62 +38,8 @@
 </head>
 <body class="noise dark:text-gray-200 text-gray-700 font-sans antialiased">
 
-<!-- Sidebar -->
-<nav class="sidebar">
-    <div class="sidebar-logo">WA</div>
-    <div class="sidebar-nav">
-        <a href="/" class="sidebar-link" title="Главная">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/></svg>
-        </a>
-        <a href="/compress" class="sidebar-link" title="Картинки">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0023.25 18.75V5.25A2.25 2.25 0 0021 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z"/></svg>
-        </a>
-        <a href="/md" class="sidebar-link" title="Markdown">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/></svg>
-        </a>
-        <a href="/placeholder" class="sidebar-link" title="Placeholder">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714a2.25 2.25 0 00.659 1.591L19 14.5M14.25 3.104c.251.023.501.05.75.082M19 14.5l-2.47 2.47a2.25 2.25 0 01-1.59.659H9.06a2.25 2.25 0 01-1.591-.659L5 14.5m14 0V17a2.25 2.25 0 01-2.25 2.25H7.25A2.25 2.25 0 015 17v-2.5"/></svg>
-        </a>
-        <a href="/parser" class="sidebar-link active" title="Parser">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m9.86-2.06a4.5 4.5 0 00-6.364-6.364L6.257 6.514a4.5 4.5 0 001.242 7.244"/></svg>
-        </a>
-        <a href="/password" class="sidebar-link" title="Password">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"/></svg>
-        </a>
-        <a href="/sanitizer" class="sidebar-link" title="Sanitizer">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
-        </a>
-        <a href="/converter" class="sidebar-link" title="Converter">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"/></svg>
-        </a>
-        <a href="/formatter" class="sidebar-link" title="Formatter">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"/></svg>
-        </a>
-        <a href="/editor" class="sidebar-link" title="Editor">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"/></svg>
-        </a>
-        <a href="/httpclient" class="sidebar-link" title="HTTP Client">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"/></svg>
-        </a>
-        <a href="/redirects" class="sidebar-link" title="Redirect Analyzer">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg>
-        </a>
-        <a href="/svgeditor" class="sidebar-link" title="SVG Редактор">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 00-5.78 1.128 2.25 2.25 0 01-2.4 2.245 4.5 4.5 0 008.4-2.245c0-.399-.078-.78-.22-1.128zm0 0a15.998 15.998 0 003.388-1.62m-5.043-.025a15.994 15.994 0 011.622-3.395m3.42 3.42a15.995 15.995 0 004.764-4.648l3.876-5.814a1.151 1.151 0 00-1.597-1.597L14.146 6.32a15.996 15.996 0 00-4.649 4.763m3.42 3.42a6.776 6.776 0 00-3.42-3.42"/></svg>
-        </a>
-    </div>
-    <div class="sidebar-bottom">
-        <div class="theme-toggle" id="themeToggle" title="Переключить тему">
-            <div class="theme-toggle-knob">
-                <svg class="w-3 h-3 dark:hidden text-amber-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"/></svg>
-                <svg class="w-3 h-3 hidden dark:block text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/></svg>
-            </div>
-        </div>
-    </div>
-</nav>
-
 <div class="main-content">
-<div class="relative z-10 max-w-3xl mx-auto px-4 py-8 sm:py-12">
+<div class="tool-container relative z-10 max-w-3xl mx-auto">
 
     <!-- Header -->
     <div class="text-center mb-8 fade-up">
@@ -189,10 +47,12 @@
             <span class="w-1.5 h-1.5 rounded-full bg-accent animate-pulse"></span>
             URL Article Parser
         </div>
-        <h1 class="text-3xl sm:text-4xl font-extrabold tracking-tight dark:text-white text-gray-900">
-            Парсер <span class="text-accent">статей</span>
-        </h1>
-        <p class="mt-2 text-sm dark:text-gray-500 text-gray-400 font-mono">извлечение контента из любой веб-страницы</p>
+        <div class="page-header">
+            <h1 class="text-3xl sm:text-4xl font-extrabold tracking-tight dark:text-white text-gray-900">
+                Парсер <span class="text-accent">статей</span>
+            </h1>
+            <p class="description mt-2 text-sm dark:text-gray-500 text-gray-400 font-mono">извлечение контента из любой веб-страницы</p>
+        </div>
     </div>
 
     <!-- Input Card -->
@@ -352,17 +212,6 @@
 </div><!-- /main-content -->
 
 <script>
-// Theme
-const html = document.documentElement;
-const savedTheme = localStorage.getItem('theme');
-if (savedTheme) { html.className = savedTheme; }
-else if (!window.matchMedia('(prefers-color-scheme: dark)').matches) { html.className = ''; }
-
-document.getElementById('themeToggle').addEventListener('click', () => {
-    const isDark = html.classList.toggle('dark');
-    localStorage.setItem('theme', isDark ? 'dark' : '');
-});
-
 // State
 let currentMode = 'full';
 let lastResult = null;
diff --git a/public/password.html b/public/password.html
index 3d71be2..23f3a9c 100644
--- a/public/password.html
+++ b/public/password.html
@@ -3,98 +3,13 @@
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Password Generator — images.wadevelop.ru</title>
+    <title>Генератор паролей — WA Dev Tools</title>
     <script src="/vendor/tailwind.js"></script>
+    <script src="/shared.js"></script>
     <link href="/vendor/fonts.css" rel="stylesheet">
-    <script>
-        tailwind.config = {
-            darkMode: 'class',
-            theme: {
-                extend: {
-                    fontFamily: {
-                        mono: ['JetBrains Mono', 'monospace'],
-                        sans: ['Manrope', 'sans-serif'],
-                    },
-                    colors: {
-                        surface: { 900: '#060c18', 800: '#091020', 700: '#0d1828', 600: '#162040' },
-                        accent: { DEFAULT: '#0054e6', dim: '#0043b8', bright: '#6b9fff' },
-                        warn: '#ffd600',
-                        danger: '#ff5252',
-                    }
-                }
-            }
-        }
-    </script>
+    <link href="/shared.css" rel="stylesheet">
+    <script>window.WA_TOOL_ID = 'password';</script>
     <style>
-        /* Sidebar */
-        .sidebar{position:fixed;top:0;left:0;width:56px;height:100vh;display:flex;flex-direction:column;align-items:center;padding:16px 0 12px;z-index:50;border-right:1px solid var(--surface-600);background:var(--surface-800);backdrop-filter:blur(12px);transition:background .3s,border-color .3s}
-        .sidebar-logo{margin-bottom:24px;color:var(--text-muted);font-size:10px;font-weight:700;letter-spacing:.08em;font-family:'JetBrains Mono',monospace}
-        .sidebar-nav{display:flex;flex-direction:column;gap:6px;flex:1}
-        .sidebar-link{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);transition:all .2s;text-decoration:none;position:relative}
-        .sidebar-link:hover{color:var(--text-secondary);background:rgba(255,255,255,.04)}
-        .sidebar-link.active{color:#0054e6;background:rgba(0,84,230,.08)}
-        .sidebar-link.active::before{content:'';position:absolute;left:-8px;top:50%;transform:translateY(-50%);width:3px;height:20px;border-radius:0 3px 3px 0;background:#0054e6}
-        .sidebar-bottom{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:8px}
-        .main-content{margin-left:56px}
-        @media(max-width:640px){
-            .sidebar{position:fixed;top:auto;bottom:0;left:0;width:100%;height:52px;flex-direction:row;justify-content:center;padding:0 16px;border-right:none;border-top:1px solid var(--surface-600);gap:0}
-            .sidebar-logo{display:none}
-            .sidebar-nav{flex-direction:row;gap:4px;flex:none}
-            .sidebar-bottom{margin-top:0;margin-left:auto;flex-direction:row}
-            .sidebar-link.active::before{left:50%;top:auto;bottom:-6px;transform:translateX(-50%);width:20px;height:3px;border-radius:3px 3px 0 0}
-            .main-content{margin-left:0;padding-bottom:60px}
-        }
-
-        :root {
-            --bg: #f5f5f7;
-            --bg-grad1: rgba(0, 67, 184, 0.04);
-            --bg-grad2: rgba(0, 50, 140, 0.03);
-            --surface-800: rgba(255,255,255,0.85);
-            --surface-700: #f0f0f3;
-            --surface-600: #dde0e6;
-            --text-primary: #1a1a2e;
-            --text-secondary: #555;
-            --text-muted: #888;
-            --select-bg: #f0f0f3;
-            --select-color: #1a1a2e;
-        }
-        .dark {
-            --bg: #060c18;
-            --bg-grad1: rgba(0, 84, 230, 0.03);
-            --bg-grad2: rgba(0, 67, 184, 0.02);
-            --surface-800: rgba(9,16,32,0.8);
-            --surface-700: #0d1828;
-            --surface-600: #162040;
-            --text-primary: #fff;
-            --text-secondary: #c0c0c0;
-            --text-muted: #666;
-            --select-bg: #091020;
-            --select-color: #e0e0e0;
-        }
-        body {
-            background: var(--bg);
-            background-image:
-                radial-gradient(ellipse at 20% 50%, var(--bg-grad1) 0%, transparent 50%),
-                radial-gradient(ellipse at 80% 20%, var(--bg-grad2) 0%, transparent 50%);
-            min-height: 100vh;
-            transition: background 0.3s;
-        }
-        .dark .noise::before {
-            content: '';
-            position: fixed;
-            inset: 0;
-            background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
-            pointer-events: none;
-            z-index: 0;
-        }
-
-        .theme-toggle { position: relative; width: 44px; height: 24px; border-radius: 12px; cursor: pointer; transition: background 0.3s; }
-        .dark .theme-toggle { background: #162040; }
-        .theme-toggle { background: #dde0e6; }
-        .theme-toggle-knob { position: absolute; top: 2px; width: 20px; height: 20px; border-radius: 50%; transition: left 0.3s, background 0.3s; display: flex; align-items: center; justify-content: center; }
-        .dark .theme-toggle-knob { left: 22px; background: #0d1828; }
-        .theme-toggle-knob { left: 2px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
-
         select, select option { background: var(--select-bg); color: var(--select-color); }
 
         @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@@ -151,73 +66,17 @@
 </head>
 <body class="noise dark:text-gray-200 text-gray-700 font-sans antialiased">
 
-<!-- Sidebar -->
-<nav class="sidebar">
-    <div class="sidebar-logo">WA</div>
-    <div class="sidebar-nav">
-        <a href="/" class="sidebar-link" title="Главная">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/></svg>
-        </a>
-        <a href="/compress" class="sidebar-link" title="Картинки">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0023.25 18.75V5.25A2.25 2.25 0 0021 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z"/></svg>
-        </a>
-        <a href="/md" class="sidebar-link" title="Markdown">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/></svg>
-        </a>
-        <a href="/placeholder" class="sidebar-link" title="Placeholder">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714a2.25 2.25 0 00.659 1.591L19 14.5M14.25 3.104c.251.023.501.05.75.082M19 14.5l-2.47 2.47a2.25 2.25 0 01-1.59.659H9.06a2.25 2.25 0 01-1.591-.659L5 14.5m14 0V17a2.25 2.25 0 01-2.25 2.25H7.25A2.25 2.25 0 015 17v-2.5"/></svg>
-        </a>
-        <a href="/parser" class="sidebar-link" title="Parser">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m9.86-2.06a4.5 4.5 0 00-6.364-6.364L6.257 6.514a4.5 4.5 0 001.242 7.244"/></svg>
-        </a>
-        <a href="/password" class="sidebar-link active" title="Password">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"/></svg>
-        </a>
-        <a href="/sanitizer" class="sidebar-link" title="Sanitizer">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
-        </a>
-        <a href="/converter" class="sidebar-link" title="Converter">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"/></svg>
-        </a>
-        <a href="/formatter" class="sidebar-link" title="Formatter">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"/></svg>
-        </a>
-        <a href="/editor" class="sidebar-link" title="Editor">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"/></svg>
-        </a>
-        <a href="/httpclient" class="sidebar-link" title="HTTP Client">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"/></svg>
-        </a>
-        <a href="/redirects" class="sidebar-link" title="Redirect Analyzer">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg>
-        </a>
-        <a href="/svgeditor" class="sidebar-link" title="SVG Редактор">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 00-5.78 1.128 2.25 2.25 0 01-2.4 2.245 4.5 4.5 0 008.4-2.245c0-.399-.078-.78-.22-1.128zm0 0a15.998 15.998 0 003.388-1.62m-5.043-.025a15.994 15.994 0 011.622-3.395m3.42 3.42a15.995 15.995 0 004.764-4.648l3.876-5.814a1.151 1.151 0 00-1.597-1.597L14.146 6.32a15.996 15.996 0 00-4.649 4.763m3.42 3.42a6.776 6.776 0 00-3.42-3.42"/></svg>
-        </a>
-    </div>
-    <div class="sidebar-bottom">
-        <div class="theme-toggle" id="themeToggle" title="Переключить тему">
-            <div class="theme-toggle-knob">
-                <svg class="w-3 h-3 dark:hidden text-amber-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"/></svg>
-                <svg class="w-3 h-3 hidden dark:block text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/></svg>
-            </div>
-        </div>
-    </div>
-</nav>
-
 <div class="main-content">
-<div class="relative z-10 max-w-2xl mx-auto px-4 py-8 sm:py-12">
+<div class="tool-container relative z-10 max-w-2xl mx-auto py-8 sm:py-12">
 
     <!-- Header -->
     <div class="text-center mb-8 fade-up">
-        <div class="inline-flex items-center gap-2 mb-3 px-3 py-1 rounded-full border dark:border-surface-600 border-gray-300 dark:bg-surface-800/60 bg-white/60 text-xs font-mono dark:text-gray-400 text-gray-500 tracking-wide">
-            <span class="w-1.5 h-1.5 rounded-full bg-accent animate-pulse"></span>
-            Crypto &middot; Client-side
+        <div class="page-header">
+            <h1 class="text-3xl sm:text-4xl font-extrabold tracking-tight dark:text-white text-gray-900">
+                Генератор <span class="text-accent">паролей</span>
+            </h1>
+            <p class="description mt-2 text-sm dark:text-gray-500 text-gray-400 font-mono">криптографически стойкая генерация</p>
         </div>
-        <h1 class="text-3xl sm:text-4xl font-extrabold tracking-tight dark:text-white text-gray-900">
-            Генератор <span class="text-accent">паролей</span>
-        </h1>
-        <p class="mt-2 text-sm dark:text-gray-500 text-gray-400 font-mono">криптографически стойкая генерация</p>
     </div>
 
     <!-- Settings Card -->
@@ -320,17 +179,6 @@
 </div><!-- /main-content -->
 
 <script>
-// Theme
-const html = document.documentElement;
-const savedTheme = localStorage.getItem('theme');
-if (savedTheme) { html.className = savedTheme; }
-else if (!window.matchMedia('(prefers-color-scheme: dark)').matches) { html.className = ''; }
-
-document.getElementById('themeToggle').addEventListener('click', () => {
-    const isDark = html.classList.toggle('dark');
-    localStorage.setItem('theme', isDark ? 'dark' : '');
-});
-
 // State
 const opts = { upper: true, lower: true, digits: true, symbols: false, exclude: false };
 const CHARSETS = {
diff --git a/public/placeholder.html b/public/placeholder.html
index ae92f4c..43984c7 100644
--- a/public/placeholder.html
+++ b/public/placeholder.html
@@ -3,98 +3,13 @@
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Placeholder — генератор заглушек</title>
+    <title>Placeholder — WA Dev Tools</title>
     <script src="/vendor/tailwind.js"></script>
+    <script>window.WA_TOOL_ID = 'placeholder';</script>
+    <script src="/shared.js"></script>
     <link href="/vendor/fonts.css" rel="stylesheet">
-    <script>
-        tailwind.config = {
-            darkMode: 'class',
-            theme: {
-                extend: {
-                    fontFamily: {
-                        mono: ['JetBrains Mono', 'monospace'],
-                        sans: ['Manrope', 'sans-serif'],
-                    },
-                    colors: {
-                        surface: { 900: '#060c18', 800: '#091020', 700: '#0d1828', 600: '#162040' },
-                        accent: { DEFAULT: '#0054e6', dim: '#0043b8', bright: '#6b9fff' },
-                        warn: '#ffd600',
-                        danger: '#ff5252',
-                    }
-                }
-            }
-        }
-    </script>
+    <link href="/shared.css" rel="stylesheet">
     <style>
-        /* Sidebar */
-        .sidebar{position:fixed;top:0;left:0;width:56px;height:100vh;display:flex;flex-direction:column;align-items:center;padding:16px 0 12px;z-index:50;border-right:1px solid var(--surface-600);background:var(--surface-800);backdrop-filter:blur(12px);transition:background .3s,border-color .3s}
-        .sidebar-logo{margin-bottom:24px;color:var(--text-muted);font-size:10px;font-weight:700;letter-spacing:.08em;font-family:'JetBrains Mono',monospace}
-        .sidebar-nav{display:flex;flex-direction:column;gap:6px;flex:1}
-        .sidebar-link{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);transition:all .2s;text-decoration:none;position:relative}
-        .sidebar-link:hover{color:var(--text-secondary);background:rgba(255,255,255,.04)}
-        .sidebar-link.active{color:#0054e6;background:rgba(0,84,230,.08)}
-        .sidebar-link.active::before{content:'';position:absolute;left:-8px;top:50%;transform:translateY(-50%);width:3px;height:20px;border-radius:0 3px 3px 0;background:#0054e6}
-        .sidebar-bottom{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:8px}
-        .main-content{margin-left:56px}
-        @media(max-width:640px){
-            .sidebar{position:fixed;top:auto;bottom:0;left:0;width:100%;height:52px;flex-direction:row;justify-content:center;padding:0 16px;border-right:none;border-top:1px solid var(--surface-600);gap:0}
-            .sidebar-logo{display:none}
-            .sidebar-nav{flex-direction:row;gap:4px;flex:none}
-            .sidebar-bottom{margin-top:0;margin-left:auto;flex-direction:row}
-            .sidebar-link.active::before{left:50%;top:auto;bottom:-6px;transform:translateX(-50%);width:20px;height:3px;border-radius:3px 3px 0 0}
-            .main-content{margin-left:0;padding-bottom:60px}
-        }
-
-        :root {
-            --bg: #f5f5f7;
-            --bg-grad1: rgba(0, 67, 184, 0.04);
-            --bg-grad2: rgba(0, 50, 140, 0.03);
-            --surface-800: rgba(255,255,255,0.85);
-            --surface-700: #f0f0f3;
-            --surface-600: #dde0e6;
-            --text-primary: #1a1a2e;
-            --text-secondary: #555;
-            --text-muted: #888;
-            --select-bg: #f0f0f3;
-            --select-color: #1a1a2e;
-        }
-        .dark {
-            --bg: #060c18;
-            --bg-grad1: rgba(0, 84, 230, 0.03);
-            --bg-grad2: rgba(0, 67, 184, 0.02);
-            --surface-800: rgba(9,16,32,0.8);
-            --surface-700: #0d1828;
-            --surface-600: #162040;
-            --text-primary: #fff;
-            --text-secondary: #c0c0c0;
-            --text-muted: #666;
-            --select-bg: #091020;
-            --select-color: #e0e0e0;
-        }
-        body {
-            background: var(--bg);
-            background-image:
-                radial-gradient(ellipse at 20% 50%, var(--bg-grad1) 0%, transparent 50%),
-                radial-gradient(ellipse at 80% 20%, var(--bg-grad2) 0%, transparent 50%);
-            min-height: 100vh;
-            transition: background 0.3s;
-        }
-        .dark .noise::before {
-            content: '';
-            position: fixed;
-            inset: 0;
-            background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
-            pointer-events: none;
-            z-index: 0;
-        }
-
-        .theme-toggle { position: relative; width: 44px; height: 24px; border-radius: 12px; cursor: pointer; transition: background 0.3s; }
-        .dark .theme-toggle { background: #162040; }
-        .theme-toggle { background: #dde0e6; }
-        .theme-toggle-knob { position: absolute; top: 2px; width: 20px; height: 20px; border-radius: 50%; transition: left 0.3s, background 0.3s; display: flex; align-items: center; justify-content: center; }
-        .dark .theme-toggle-knob { left: 22px; background: #0d1828; }
-        .theme-toggle-knob { left: 2px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
-
         select, select option { background: var(--select-bg); color: var(--select-color); }
 
         @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@@ -122,62 +37,8 @@
 </head>
 <body class="noise dark:text-gray-200 text-gray-700 font-sans antialiased">
 
-<!-- Sidebar -->
-<nav class="sidebar">
-    <div class="sidebar-logo">WA</div>
-    <div class="sidebar-nav">
-        <a href="/" class="sidebar-link" title="Главная">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/></svg>
-        </a>
-        <a href="/compress" class="sidebar-link" title="Картинки">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0023.25 18.75V5.25A2.25 2.25 0 0021 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z"/></svg>
-        </a>
-        <a href="/md" class="sidebar-link" title="Markdown">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/></svg>
-        </a>
-        <a href="/placeholder" class="sidebar-link active" title="Placeholder">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714a2.25 2.25 0 00.659 1.591L19 14.5M14.25 3.104c.251.023.501.05.75.082M19 14.5l-2.47 2.47a2.25 2.25 0 01-1.59.659H9.06a2.25 2.25 0 01-1.591-.659L5 14.5m14 0V17a2.25 2.25 0 01-2.25 2.25H7.25A2.25 2.25 0 015 17v-2.5"/></svg>
-        </a>
-        <a href="/parser" class="sidebar-link" title="Parser">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m9.86-2.06a4.5 4.5 0 00-6.364-6.364L6.257 6.514a4.5 4.5 0 001.242 7.244"/></svg>
-        </a>
-        <a href="/password" class="sidebar-link" title="Password">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"/></svg>
-        </a>
-        <a href="/sanitizer" class="sidebar-link" title="Sanitizer">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
-        </a>
-        <a href="/converter" class="sidebar-link" title="Converter">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"/></svg>
-        </a>
-        <a href="/formatter" class="sidebar-link" title="Formatter">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"/></svg>
-        </a>
-        <a href="/editor" class="sidebar-link" title="Editor">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"/></svg>
-        </a>
-        <a href="/httpclient" class="sidebar-link" title="HTTP Client">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"/></svg>
-        </a>
-        <a href="/redirects" class="sidebar-link" title="Redirect Analyzer">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg>
-        </a>
-        <a href="/svgeditor" class="sidebar-link" title="SVG Редактор">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 00-5.78 1.128 2.25 2.25 0 01-2.4 2.245 4.5 4.5 0 008.4-2.245c0-.399-.078-.78-.22-1.128zm0 0a15.998 15.998 0 003.388-1.62m-5.043-.025a15.994 15.994 0 011.622-3.395m3.42 3.42a15.995 15.995 0 004.764-4.648l3.876-5.814a1.151 1.151 0 00-1.597-1.597L14.146 6.32a15.996 15.996 0 00-4.649 4.763m3.42 3.42a6.776 6.776 0 00-3.42-3.42"/></svg>
-        </a>
-    </div>
-    <div class="sidebar-bottom">
-        <div class="theme-toggle" id="themeToggle" title="Переключить тему">
-            <div class="theme-toggle-knob">
-                <svg class="w-3 h-3 dark:hidden text-amber-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"/></svg>
-                <svg class="w-3 h-3 hidden dark:block text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/></svg>
-            </div>
-        </div>
-    </div>
-</nav>
-
 <div class="main-content">
-<div class="relative z-10 max-w-2xl mx-auto px-4 py-8 sm:py-12">
+<div class="tool-container relative z-10 max-w-2xl mx-auto">
 
     <!-- Header -->
     <div class="text-center mb-8 fade-up">
@@ -185,10 +46,12 @@
             <span class="w-1.5 h-1.5 rounded-full bg-accent animate-pulse"></span>
             PNG &middot; JPG &middot; WebP
         </div>
-        <h1 class="text-3xl sm:text-4xl font-extrabold tracking-tight dark:text-white text-gray-900">
-            <span class="text-accent">Placeholder</span> генератор
-        </h1>
-        <p class="mt-2 text-sm dark:text-gray-500 text-gray-400 font-mono">изображения-заглушки любого размера</p>
+        <div class="page-header">
+            <h1 class="text-3xl sm:text-4xl font-extrabold tracking-tight dark:text-white text-gray-900">
+                Placeholder <span class="text-accent">генератор</span>
+            </h1>
+            <p class="description mt-2 text-sm dark:text-gray-500 text-gray-400 font-mono">изображения-заглушки любого размера</p>
+        </div>
     </div>
 
     <!-- Controls Card -->
@@ -300,17 +163,6 @@
 </div><!-- /main-content -->
 
 <script>
-// Theme
-const html = document.documentElement;
-const savedTheme = localStorage.getItem('theme');
-if (savedTheme) { html.className = savedTheme; }
-else if (!window.matchMedia('(prefers-color-scheme: dark)').matches) { html.className = ''; }
-
-document.getElementById('themeToggle').addEventListener('click', () => {
-    const isDark = html.classList.toggle('dark');
-    localStorage.setItem('theme', isDark ? 'dark' : '');
-});
-
 // Elements
 const widthEl = document.getElementById('width');
 const heightEl = document.getElementById('height');
diff --git a/public/redirects.html b/public/redirects.html
index 729d6cb..8ffafe9 100644
--- a/public/redirects.html
+++ b/public/redirects.html
@@ -3,57 +3,13 @@
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Redirect Analyzer — images.wadevelop.ru</title>
+    <title>Redirect Analyzer — WA Dev Tools</title>
     <script src="/vendor/tailwind.js"></script>
+    <script>window.WA_TOOL_ID = 'redirects';</script>
+    <script src="/shared.js"></script>
     <link href="/vendor/fonts.css" rel="stylesheet">
-    <script>
-        tailwind.config = {
-            darkMode: 'class',
-            theme: {
-                extend: {
-                    fontFamily: {
-                        mono: ['JetBrains Mono', 'monospace'],
-                        sans: ['Manrope', 'sans-serif'],
-                    },
-                    colors: {
-                        surface: { 900: '#060c18', 800: '#091020', 700: '#0d1828', 600: '#162040' },
-                        accent: { DEFAULT: '#0054e6', dim: '#0043b8', bright: '#6b9fff' },
-                        warn: '#ffd600',
-                        danger: '#ff5252',
-                    }
-                }
-            }
-        }
-    </script>
+    <link href="/shared.css" rel="stylesheet">
     <style>
-        .sidebar{position:fixed;top:0;left:0;width:56px;height:100vh;display:flex;flex-direction:column;align-items:center;padding:16px 0 12px;z-index:50;border-right:1px solid var(--surface-600);background:var(--surface-800);backdrop-filter:blur(12px);transition:background .3s,border-color .3s}
-        .sidebar-logo{margin-bottom:24px;color:var(--text-muted);font-size:10px;font-weight:700;letter-spacing:.08em;font-family:'JetBrains Mono',monospace}
-        .sidebar-nav{display:flex;flex-direction:column;gap:6px;flex:1}
-        .sidebar-link{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);transition:all .2s;text-decoration:none;position:relative}
-        .sidebar-link:hover{color:var(--text-secondary);background:rgba(255,255,255,.04)}
-        .sidebar-link.active{color:#0054e6;background:rgba(0,84,230,.08)}
-        .sidebar-link.active::before{content:'';position:absolute;left:-8px;top:50%;transform:translateY(-50%);width:3px;height:20px;border-radius:0 3px 3px 0;background:#0054e6}
-        .sidebar-bottom{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:8px}
-        .main-content{margin-left:56px}
-        @media(max-width:640px){
-            .sidebar{position:fixed;top:auto;bottom:0;left:0;width:100%;height:52px;flex-direction:row;justify-content:center;padding:0 16px;border-right:none;border-top:1px solid var(--surface-600);gap:0}
-            .sidebar-logo{display:none}
-            .sidebar-nav{flex-direction:row;gap:4px;flex:none}
-            .sidebar-bottom{margin-top:0;margin-left:auto;flex-direction:row}
-            .sidebar-link.active::before{left:50%;top:auto;bottom:-6px;transform:translateX(-50%);width:20px;height:3px;border-radius:3px 3px 0 0}
-            .main-content{margin-left:0;padding-bottom:60px}
-        }
-        :root{--bg:#f5f5f7;--bg-grad1:rgba(0,67,184,.04);--bg-grad2:rgba(0,50,140,.03);--surface-800:rgba(255,255,255,0.85);--surface-700:#f0f0f3;--surface-600:#dde0e6;--text-primary:#1a1a2e;--text-secondary:#555;--text-muted:#888;--select-bg:#fff;--select-color:#1a1a2e}
-        .dark{--bg:#060c18;--bg-grad1:rgba(0,84,230,.03);--bg-grad2:rgba(0,67,184,.02);--surface-800:rgba(9,16,32,0.8);--surface-700:#0d1828;--surface-600:#162040;--text-primary:#fff;--text-secondary:#c0c0c0;--text-muted:#666;--select-bg:#091020;--select-color:#e0e0e0}
-        body{background:var(--bg);background-image:radial-gradient(ellipse at 20% 50%,var(--bg-grad1) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,var(--bg-grad2) 0%,transparent 50%);min-height:100vh;transition:background .3s}
-        .dark .noise::before{content:'';position:fixed;inset:0;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");pointer-events:none;z-index:0}
-        .theme-toggle{position:relative;width:44px;height:24px;border-radius:12px;cursor:pointer;transition:background .3s}
-        .dark .theme-toggle{background:#162040}
-        .theme-toggle{background:#dde0e6}
-        .theme-toggle-knob{position:absolute;top:2px;width:20px;height:20px;border-radius:50%;transition:left .3s,background .3s;display:flex;align-items:center;justify-content:center}
-        .dark .theme-toggle-knob{left:22px;background:#0d1828}
-        .theme-toggle-knob{left:2px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.15)}
-
         /* Redirect Analyzer UI */
         .panel {
             background: var(--surface-800);
@@ -281,74 +237,16 @@
 </head>
 <body class="noise dark:text-gray-200 text-gray-700 font-sans antialiased">
 
-<!-- Sidebar -->
-<nav class="sidebar">
-    <div class="sidebar-logo">IW</div>
-    <div class="sidebar-nav">
-        <a href="/" class="sidebar-link" title="Главная">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/></svg>
-        </a>
-        <a href="/compress" class="sidebar-link" title="Картинки">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0023.25 18.75V5.25A2.25 2.25 0 0021 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z"/></svg>
-        </a>
-        <a href="/md" class="sidebar-link" title="Markdown">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/></svg>
-        </a>
-        <a href="/placeholder" class="sidebar-link" title="Placeholder">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714a2.25 2.25 0 00.659 1.591L19 14.5M14.25 3.104c.251.023.501.05.75.082M19 14.5l-2.47 2.47a2.25 2.25 0 01-1.59.659H9.06a2.25 2.25 0 01-1.591-.659L5 14.5m14 0V17a2.25 2.25 0 01-2.25 2.25H7.25A2.25 2.25 0 015 17v-2.5"/></svg>
-        </a>
-        <a href="/parser" class="sidebar-link" title="Parser">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m9.86-2.06a4.5 4.5 0 00-6.364-6.364L6.257 6.514a4.5 4.5 0 001.242 7.244"/></svg>
-        </a>
-        <a href="/password" class="sidebar-link" title="Password">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"/></svg>
-        </a>
-        <a href="/sanitizer" class="sidebar-link" title="Sanitizer">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
-        </a>
-        <a href="/converter" class="sidebar-link" title="Converter">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"/></svg>
-        </a>
-        <a href="/formatter" class="sidebar-link" title="Formatter">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"/></svg>
-        </a>
-        <a href="/editor" class="sidebar-link" title="Editor">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"/></svg>
-        </a>
-        <a href="/httpclient" class="sidebar-link" title="HTTP Client">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"/></svg>
-        </a>
-        <a href="/redirects" class="sidebar-link active" title="Redirect Analyzer">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg>
-        </a>
-        <a href="/svgeditor" class="sidebar-link" title="SVG Редактор">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 00-5.78 1.128 2.25 2.25 0 01-2.4 2.245 4.5 4.5 0 008.4-2.245c0-.399-.078-.78-.22-1.128zm0 0a15.998 15.998 0 003.388-1.62m-5.043-.025a15.994 15.994 0 011.622-3.395m3.42 3.42a15.995 15.995 0 004.764-4.648l3.876-5.814a1.151 1.151 0 00-1.597-1.597L14.146 6.32a15.996 15.996 0 00-4.649 4.763m3.42 3.42a6.776 6.776 0 00-3.42-3.42"/></svg>
-        </a>
-    </div>
-    <div class="sidebar-bottom">
-        <div class="theme-toggle" id="themeToggle" title="Переключить тему">
-            <div class="theme-toggle-knob">
-                <svg class="w-3 h-3 dark:hidden text-amber-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"/></svg>
-                <svg class="w-3 h-3 hidden dark:block text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/></svg>
-            </div>
-        </div>
-    </div>
-</nav>
-
 <!-- Main -->
 <div class="main-content">
-<div class="relative z-10 p-6 max-w-5xl mx-auto">
+<div class="tool-container relative z-10 max-w-5xl mx-auto px-4">
 
     <!-- Header -->
-    <div class="mb-8 text-center">
-        <div class="inline-flex items-center gap-2 mb-3 px-3 py-1 rounded-full border dark:border-surface-600 border-gray-300 dark:bg-surface-800/60 bg-white/60 text-xs font-mono dark:text-gray-400 text-gray-500 tracking-wide">
-            <span class="w-1.5 h-1.5 rounded-full bg-accent animate-pulse"></span>
-            HTTP · HTTPS · 301 · 302
-        </div>
+    <div class="page-header">
         <h1 class="text-3xl sm:text-4xl font-extrabold tracking-tight dark:text-white text-gray-900">
             Redirect <span class="text-accent">Анализатор</span>
         </h1>
-        <p class="mt-2 text-sm dark:text-gray-500 text-gray-400 font-mono">анализ цепочки HTTP-редиректов</p>
+        <p class="description mt-2 text-sm dark:text-gray-500 text-gray-400 font-mono">анализ цепочки HTTP-редиректов</p>
     </div>
 
     <!-- URL Bar -->
@@ -458,16 +356,6 @@
 
 <script>
 (function() {
-    // Theme
-    const html = document.documentElement;
-    const savedTheme = localStorage.getItem('theme');
-    if (savedTheme) { html.className = savedTheme; }
-    else if (!window.matchMedia('(prefers-color-scheme: dark)').matches) { html.className = ''; }
-    document.getElementById('themeToggle').addEventListener('click', () => {
-        const isDark = html.classList.toggle('dark');
-        localStorage.setItem('theme', isDark ? 'dark' : '');
-    });
-
     // State
     let lastResult = null;
 
@@ -709,4 +597,4 @@
 })();
 </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/public/sanitizer.html b/public/sanitizer.html
index a25b415..314272c 100644
--- a/public/sanitizer.html
+++ b/public/sanitizer.html
@@ -3,54 +3,13 @@
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>HTML Sanitizer — images.wadevelop.ru</title>
+    <title>HTML Sanitizer — WA Dev Tools</title>
     <script src="/vendor/tailwind.js"></script>
+    <script>window.WA_TOOL_ID = 'sanitizer';</script>
+    <script src="/shared.js"></script>
     <link href="/vendor/fonts.css" rel="stylesheet">
-    <script>
-        tailwind.config = {
-            darkMode: 'class',
-            theme: {
-                extend: {
-                    fontFamily: {
-                        mono: ['JetBrains Mono', 'monospace'],
-                        sans: ['Manrope', 'sans-serif'],
-                    },
-                    colors: {
-                        surface: { 900: '#060c18', 800: '#091020', 700: '#0d1828', 600: '#162040' },
-                        accent: { DEFAULT: '#0054e6', dim: '#0043b8', bright: '#6b9fff' },
-                        warn: '#ffd600',
-                        danger: '#ff5252',
-                    }
-                }
-            }
-        }
-    </script>
+    <link href="/shared.css" rel="stylesheet">
     <style>
-        .sidebar{position:fixed;top:0;left:0;width:56px;height:100vh;display:flex;flex-direction:column;align-items:center;padding:16px 0 12px;z-index:50;border-right:1px solid var(--surface-600);background:var(--surface-800);backdrop-filter:blur(12px);transition:background .3s,border-color .3s}
-        .sidebar-logo{margin-bottom:24px;color:var(--text-muted);font-size:10px;font-weight:700;letter-spacing:.08em;font-family:'JetBrains Mono',monospace}
-        .sidebar-nav{display:flex;flex-direction:column;gap:6px;flex:1}
-        .sidebar-link{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);transition:all .2s;text-decoration:none;position:relative}
-        .sidebar-link:hover{color:var(--text-secondary);background:rgba(255,255,255,.04)}
-        .sidebar-link.active{color:#0054e6;background:rgba(0,84,230,.08)}
-        .sidebar-link.active::before{content:'';position:absolute;left:-8px;top:50%;transform:translateY(-50%);width:3px;height:20px;border-radius:0 3px 3px 0;background:#0054e6}
-        .sidebar-bottom{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:8px}
-        .main-content{margin-left:56px}
-        @media(max-width:640px){
-            .sidebar{position:fixed;top:auto;bottom:0;left:0;width:100%;height:52px;flex-direction:row;justify-content:center;padding:0 16px;border-right:none;border-top:1px solid var(--surface-600);gap:0}
-            .sidebar-logo{display:none}
-            .sidebar-nav{flex-direction:row;gap:4px;flex:none}
-            .sidebar-bottom{margin-top:0;margin-left:auto;flex-direction:row}
-            .sidebar-link.active::before{left:50%;top:auto;bottom:-6px;transform:translateX(-50%);width:20px;height:3px;border-radius:3px 3px 0 0}
-            .main-content{margin-left:0;padding-bottom:60px}
-        }
-        :root{--bg:#f5f5f7;--bg-grad1:rgba(0,67,184,.04);--bg-grad2:rgba(0,150,60,.03);--surface-800:rgba(255,255,255,0.85);--surface-700:#f0f0f3;--surface-600:#dde0e6;--text-primary:#1a1a2e;--text-secondary:#555;--text-muted:#888;--select-bg:#f0f0f3;--select-color:#1a1a2e}
-        .dark{--bg:#060c18;--bg-grad1:rgba(0,84,230,.03);--bg-grad2:rgba(0,67,184,.02);--surface-800:rgba(9,16,32,0.8);--surface-700:#0d1828;--surface-600:#162040;--text-primary:#fff;--text-secondary:#c0c0c0;--text-muted:#666;--select-bg:#091020;--select-color:#e0e0e0}
-        body{background:var(--bg);background-image:radial-gradient(ellipse at 20% 50%,var(--bg-grad1) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,var(--bg-grad2) 0%,transparent 50%);min-height:100vh;transition:background .3s}
-        .dark .noise::before{content:'';position:fixed;inset:0;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");pointer-events:none;z-index:0}
-        .theme-toggle{position:relative;width:44px;height:24px;border-radius:12px;cursor:pointer;transition:background .3s}
-        .dark .theme-toggle{background:#162040}.theme-toggle{background:#dde0e6}
-        .theme-toggle-knob{position:absolute;top:2px;width:20px;height:20px;border-radius:50%;transition:left .3s,background .3s;display:flex;align-items:center;justify-content:center}
-        .dark .theme-toggle-knob{left:22px;background:#0d1828}.theme-toggle-knob{left:2px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.15)}
         select,select option{background:var(--select-bg);color:var(--select-color)}
         @keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.fade-up{animation:fadeUp .4s ease-out forwards}.fade-up-delay{animation:fadeUp .4s ease-out .1s forwards;opacity:0}
         .tool-btn{transition:all .2s}.tool-btn.active{color:#0054e6;background:rgba(0,84,230,.08);border-color:rgba(0,84,230,.3)}
@@ -60,43 +19,10 @@
 </head>
 <body class="noise dark:text-gray-200 text-gray-700 font-sans antialiased">
 
-<nav class="sidebar">
-    <div class="sidebar-logo">WA</div>
-    <div class="sidebar-nav">
-        <a href="/" class="sidebar-link" title="Главная"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/></svg></a>
-        <a href="/compress" class="sidebar-link" title="Картинки"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0023.25 18.75V5.25A2.25 2.25 0 0021 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z"/></svg></a>
-        <a href="/md" class="sidebar-link" title="Markdown"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/></svg></a>
-        <a href="/placeholder" class="sidebar-link" title="Placeholder"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714a2.25 2.25 0 00.659 1.591L19 14.5M14.25 3.104c.251.023.501.05.75.082M19 14.5l-2.47 2.47a2.25 2.25 0 01-1.59.659H9.06a2.25 2.25 0 01-1.591-.659L5 14.5m14 0V17a2.25 2.25 0 01-2.25 2.25H7.25A2.25 2.25 0 015 17v-2.5"/></svg></a>
-        <a href="/parser" class="sidebar-link" title="Parser"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m9.86-2.06a4.5 4.5 0 00-6.364-6.364L6.257 6.514a4.5 4.5 0 001.242 7.244"/></svg></a>
-        <a href="/password" class="sidebar-link" title="Password"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"/></svg></a>
-        <a href="/sanitizer" class="sidebar-link active" title="Sanitizer"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg></a>
-        <a href="/converter" class="sidebar-link" title="Converter"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"/></svg></a>
-        <a href="/formatter" class="sidebar-link" title="Formatter"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"/></svg></a>
-        <a href="/editor" class="sidebar-link" title="Editor"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"/></svg></a>
-        <a href="/httpclient" class="sidebar-link" title="HTTP Client">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"/></svg>
-        </a>
-        <a href="/redirects" class="sidebar-link" title="Redirect Analyzer">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg>
-        </a>
-        <a href="/svgeditor" class="sidebar-link" title="SVG Редактор">
-            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 00-5.78 1.128 2.25 2.25 0 01-2.4 2.245 4.5 4.5 0 008.4-2.245c0-.399-.078-.78-.22-1.128zm0 0a15.998 15.998 0 003.388-1.62m-5.043-.025a15.994 15.994 0 011.622-3.395m3.42 3.42a15.995 15.995 0 004.764-4.648l3.876-5.814a1.151 1.151 0 00-1.597-1.597L14.146 6.32a15.996 15.996 0 00-4.649 4.763m3.42 3.42a6.776 6.776 0 00-3.42-3.42"/></svg>
-        </a>
-    </div>
-    <div class="sidebar-bottom">
-        <div class="theme-toggle" id="themeToggle" title="Переключить тему">
-            <div class="theme-toggle-knob">
-                <svg class="w-3 h-3 dark:hidden text-amber-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"/></svg>
-                <svg class="w-3 h-3 hidden dark:block text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/></svg>
-            </div>
-        </div>
-    </div>
-</nav>
-
 <div class="main-content">
-<div class="relative z-10 max-w-3xl mx-auto px-4 py-8 sm:py-12">
+<div class="tool-container relative z-10 max-w-3xl mx-auto px-4 py-8 sm:py-12">
 
-    <div class="text-center mb-8 fade-up">
+    <div class="page-header text-center mb-8 fade-up">
         <div class="inline-flex items-center gap-2 mb-3 px-3 py-1 rounded-full border dark:border-surface-600 border-gray-300 dark:bg-surface-800/60 bg-white/60 text-xs font-mono dark:text-gray-400 text-gray-500 tracking-wide">
             <span class="w-1.5 h-1.5 rounded-full bg-accent animate-pulse"></span>
             XSS Protection &middot; Client-side
@@ -104,7 +30,7 @@
         <h1 class="text-3xl sm:text-4xl font-extrabold tracking-tight dark:text-white text-gray-900">
             HTML <span class="text-accent">Sanitizer</span>
         </h1>
-        <p class="mt-2 text-sm dark:text-gray-500 text-gray-400 font-mono">очистка, извлечение текста, entities, минификация</p>
+        <p class="description mt-2 text-sm dark:text-gray-500 text-gray-400 font-mono">очистка, извлечение текста, entities, минификация</p>
     </div>
 
     <!-- Tool Grid -->
@@ -166,15 +92,6 @@
 </div>
 
 <script>
-const html = document.documentElement;
-const savedTheme = localStorage.getItem('theme');
-if (savedTheme) { html.className = savedTheme; }
-else if (!window.matchMedia('(prefers-color-scheme: dark)').matches) { html.className = ''; }
-document.getElementById('themeToggle').addEventListener('click', () => {
-    const isDark = html.classList.toggle('dark');
-    localStorage.setItem('theme', isDark ? 'dark' : '');
-});
-
 const TOOLS = {
     sanitize:   { btn: 'Очистить',       ph: 'Вставьте HTML для очистки...' },
     htmlToText: { btn: 'Извлечь текст',   ph: 'Вставьте HTML...' },
diff --git a/public/shared.css b/public/shared.css
new file mode 100644
index 0000000..b977906
--- /dev/null
+++ b/public/shared.css
@@ -0,0 +1,97 @@
+/* WA Dev Tools — Shared Styles */
+
+/* Theme variables */
+:root {
+    --bg: #f5f5f7;
+    --bg-grad1: rgba(0, 67, 184, 0.04);
+    --bg-grad2: rgba(0, 50, 140, 0.03);
+    --surface-800: rgba(255,255,255,0.85);
+    --surface-700: #f0f0f3;
+    --surface-600: #dde0e6;
+    --text-primary: #1a1a2e;
+    --text-secondary: #555;
+    --text-muted: #888;
+    --bar-bg: #e0e0e0;
+    --select-bg: #f0f0f3;
+    --select-color: #1a1a2e;
+    --accent: #0054e6;
+    --accent-dim: #0043b8;
+    --accent-bright: #6b9fff;
+    --accent-bg: rgba(0,84,230,.08);
+}
+.dark {
+    --bg: #060c18;
+    --bg-grad1: rgba(0, 84, 230, 0.03);
+    --bg-grad2: rgba(0, 67, 184, 0.02);
+    --surface-800: rgba(9,16,32,0.8);
+    --surface-700: #0d1828;
+    --surface-600: #162040;
+    --text-primary: #fff;
+    --text-secondary: #c0c0c0;
+    --text-muted: #666;
+    --bar-bg: #0d1828;
+    --select-bg: #091020;
+    --select-color: #e0e0e0;
+}
+
+/* Base */
+body {
+    background: var(--bg);
+    background-image:
+        radial-gradient(ellipse at 20% 50%, var(--bg-grad1) 0%, transparent 50%),
+        radial-gradient(ellipse at 80% 20%, var(--bg-grad2) 0%, transparent 50%);
+    min-height: 100vh;
+    transition: background 0.3s;
+    margin: 0;
+}
+
+/* Sidebar */
+.sidebar { position:fixed;top:0;left:0;width:56px;height:100vh;display:flex;flex-direction:column;align-items:center;padding:16px 0 12px;z-index:50;border-right:1px solid var(--surface-600);background:var(--surface-800);backdrop-filter:blur(12px);transition:background .3s,border-color .3s }
+.sidebar-logo { margin-bottom:24px;color:var(--text-muted);font-size:10px;font-weight:700;letter-spacing:.08em;font-family:'JetBrains Mono',monospace }
+.sidebar-nav { display:flex;flex-direction:column;gap:6px;flex:1 }
+.sidebar-link { width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);transition:all .2s;text-decoration:none;position:relative }
+.sidebar-link:hover { color:var(--text-secondary);background:rgba(255,255,255,.04) }
+.sidebar-link.active { color:var(--accent);background:var(--accent-bg) }
+.sidebar-link.active::before { content:'';position:absolute;left:-8px;top:50%;transform:translateY(-50%);width:3px;height:20px;border-radius:0 3px 3px 0;background:var(--accent) }
+.sidebar-bottom { margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:8px }
+.main-content { margin-left:56px }
+
+/* Theme toggle */
+.theme-toggle { width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s;color:var(--text-muted) }
+.theme-toggle:hover { background:rgba(255,255,255,.06);color:var(--text-secondary) }
+.theme-toggle-knob { display:flex;align-items:center;justify-content:center }
+
+/* Mobile bottom bar */
+@media(max-width:640px) {
+    .sidebar { position:fixed;top:auto;bottom:0;left:0;width:100%;height:52px;flex-direction:row;justify-content:center;padding:0 16px;border-right:none;border-top:1px solid var(--surface-600);gap:0 }
+    .sidebar-logo { display:none }
+    .sidebar-nav { flex-direction:row;gap:4px;flex:none }
+    .sidebar-bottom { margin-top:0;margin-left:auto;flex-direction:row }
+    .sidebar-link.active::before { left:50%;top:auto;bottom:-6px;transform:translateX(-50%);width:20px;height:3px;border-radius:3px 3px 0 0 }
+    .main-content { margin-left:0;padding-bottom:60px }
+}
+
+/* Page header */
+.page-header { margin-bottom:24px }
+.page-header h1 { font-size:1.875rem;font-weight:800;letter-spacing:-0.025em;color:var(--text-primary);line-height:1.2 }
+@media(min-width:640px) { .page-header h1 { font-size:2.25rem } }
+.page-header h1 .accent { color:var(--accent) }
+.page-header .description { margin-top:8px;font-size:0.875rem;color:var(--text-muted);font-family:'JetBrains Mono',monospace }
+
+/* Standard content container */
+.tool-container { padding:32px 16px }
+@media(min-width:640px) { .tool-container { padding:48px 16px } }
+
+/* Common form elements */
+.wa-input { background:var(--select-bg);border:1px solid var(--surface-600);color:var(--select-color);padding:10px 14px;border-radius:8px;font-family:'JetBrains Mono',monospace;font-size:13px;outline:none;transition:border-color .2s }
+.wa-input:focus { border-color:var(--accent) }
+.wa-btn { padding:10px 20px;background:var(--accent);color:#fff;border:none;border-radius:8px;font-family:'Manrope',sans-serif;font-weight:600;font-size:14px;cursor:pointer;transition:background .2s }
+.wa-btn:hover { background:var(--accent-dim) }
+.wa-btn:disabled { opacity:0.5;cursor:not-allowed }
+.wa-card { background:var(--surface-700);border:1px solid var(--surface-600);border-radius:12px;padding:20px;transition:background .3s,border-color .3s }
+
+/* Scrollbar */
+::-webkit-scrollbar { width:6px;height:6px }
+::-webkit-scrollbar-track { background:transparent }
+::-webkit-scrollbar-thumb { background:var(--surface-600);border-radius:3px }
+::-webkit-scrollbar-thumb:hover { background:var(--text-muted) }
diff --git a/public/shared.js b/public/shared.js
new file mode 100644
index 0000000..335a771
--- /dev/null
+++ b/public/shared.js
@@ -0,0 +1,111 @@
+/* WA Dev Tools — Shared JS (sidebar, theme, tailwind config) */
+
+/* Tailwind config */
+if (typeof tailwind !== 'undefined') {
+    tailwind.config = {
+        darkMode: 'class',
+        theme: {
+            extend: {
+                fontFamily: {
+                    mono: ['JetBrains Mono', 'monospace'],
+                    sans: ['Manrope', 'sans-serif'],
+                },
+                colors: {
+                    surface: { 900: '#060c18', 800: '#091020', 700: '#0d1828', 600: '#162040' },
+                    accent: { DEFAULT: '#0054e6', dim: '#0043b8', bright: '#6b9fff' },
+                    warn: '#ffd600',
+                    danger: '#ff5252',
+                }
+            }
+        }
+    };
+}
+
+/* Sidebar tools definition */
+const WA_TOOLS = [
+    { id: 'home', path: '/', title: 'Главная', icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/>' },
+    { id: 'compress', path: '/compress', title: 'Картинки', icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0023.25 18.75V5.25A2.25 2.25 0 0021 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z"/>' },
+    { id: 'md', path: '/md', title: 'Markdown', icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/>' },
+    { id: 'placeholder', path: '/placeholder', title: 'Placeholder', icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714a2.25 2.25 0 00.659 1.591L19 14.5M14.25 3.104c.251.023.501.05.75.082M19 14.5l-2.47 2.47a2.25 2.25 0 01-1.59.659H9.06a2.25 2.25 0 01-1.591-.659L5 14.5m14 0V17a2.25 2.25 0 01-2.25 2.25H7.25A2.25 2.25 0 015 17v-2.5"/>' },
+    { id: 'parser', path: '/parser', title: 'Parser', icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m9.86-2.06a4.5 4.5 0 00-6.364-6.364L6.257 6.514a4.5 4.5 0 001.242 7.244"/>' },
+    { id: 'password', path: '/password', title: 'Password', icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"/>' },
+    { id: 'sanitizer', path: '/sanitizer', title: 'Sanitizer', icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/>' },
+    { id: 'converter', path: '/converter', title: 'Converter', icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"/>' },
+    { id: 'formatter', path: '/formatter', title: 'Formatter', icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"/>' },
+    { id: 'editor', path: '/editor', title: 'Editor', icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"/>' },
+    { id: 'httpclient', path: '/httpclient', title: 'HTTP Client', icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"/>' },
+    { id: 'redirects', path: '/redirects', title: 'Redirects', icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/>' },
+    { id: 'svgeditor', path: '/svgeditor', title: 'SVG Editor', icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 00-5.78 1.128 2.25 2.25 0 01-2.4 2.245 4.5 4.5 0 008.4-2.245c0-.399-.078-.78-.22-1.128zm0 0a15.998 15.998 0 003.388-1.62m-5.043-.025a15.994 15.994 0 011.622-3.395m3.42 3.42a15.995 15.995 0 004.764-4.648l3.876-5.814a1.151 1.151 0 00-1.597-1.597L14.146 6.32a15.996 15.996 0 00-4.649 4.763m3.42 3.42a6.776 6.776 0 00-3.42-3.42"/>' },
+    { id: 'logs', path: '/logs', title: 'Logs', icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 010 3.75H5.625a1.875 1.875 0 010-3.75z"/>' },
+];
+
+/* Build sidebar SVG icon */
+function _svgIcon(innerPath) {
+    return `<svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">${innerPath}</svg>`;
+}
+
+/* Inject sidebar into the page */
+function initSidebar(activeId) {
+    // Determine active tool from activeId or URL
+    if (!activeId) {
+        const path = window.location.pathname;
+        const match = WA_TOOLS.find(t => t.path !== '/' && path.startsWith(t.path));
+        activeId = match ? match.id : 'home';
+    }
+
+    const links = WA_TOOLS.map(t =>
+        `<a href="${t.path}" class="sidebar-link${t.id === activeId ? ' active' : ''}" title="${t.title}">${_svgIcon(t.icon)}</a>`
+    ).join('\n        ');
+
+    const nav = document.createElement('nav');
+    nav.className = 'sidebar';
+    nav.innerHTML = `
+    <div class="sidebar-logo">WA</div>
+    <div class="sidebar-nav">
+        ${links}
+    </div>
+    <div class="sidebar-bottom">
+        <div class="theme-toggle" id="themeToggle" title="Переключить тему">
+            <div class="theme-toggle-knob">
+                <svg class="wa-sun-icon" width="14" height="14" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"/></svg>
+                <svg class="wa-moon-icon" width="14" height="14" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/></svg>
+            </div>
+        </div>
+    </div>`;
+
+    document.body.prepend(nav);
+    _updateThemeIcons();
+}
+
+/* Theme management */
+function initTheme() {
+    const html = document.documentElement;
+    const saved = localStorage.getItem('theme');
+    if (saved === 'dark' || (!saved && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+        html.classList.add('dark');
+    } else if (saved === '') {
+        html.classList.remove('dark');
+    }
+
+    document.addEventListener('click', (e) => {
+        const toggle = e.target.closest('#themeToggle');
+        if (!toggle) return;
+        const isDark = html.classList.toggle('dark');
+        localStorage.setItem('theme', isDark ? 'dark' : '');
+        _updateThemeIcons();
+    });
+}
+
+function _updateThemeIcons() {
+    const isDark = document.documentElement.classList.contains('dark');
+    document.querySelectorAll('.wa-sun-icon').forEach(el => el.style.display = isDark ? 'none' : 'block');
+    document.querySelectorAll('.wa-moon-icon').forEach(el => el.style.display = isDark ? 'block' : 'none');
+}
+
+/* Auto-init on DOM ready */
+document.addEventListener('DOMContentLoaded', () => {
+    initSidebar(window.WA_TOOL_ID);
+});
+
+/* Init theme immediately (before DOM ready to prevent flash) */
+initTheme();
diff --git a/public/svgeditor.html b/public/svgeditor.html
index dbd035f..1676c5f 100644
--- a/public/svgeditor.html
+++ b/public/svgeditor.html
@@ -1,2455 +1,2427 @@
-<!DOCTYPE html>
-<html lang="ru" class="dark">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>SVG Редактор — images.wadevelop.ru</title>
-<link href="/vendor/fonts.css" rel="stylesheet">
-<script src="/vendor/opentype.min.js"></script>
-<style>
-*{margin:0;padding:0;box-sizing:border-box}
-:root{--bg:#060c18;--surface-800:rgba(9,16,32,0.95);--surface-700:#0d1828;--surface-600:#162040;--text-primary:#fff;--text-secondary:#c0c0c0;--text-muted:#666;--accent:#0054e6;--accent-dim:#0043b8;--accent-bg:rgba(0,84,230,0.08);--danger:#ff5252;--warn:#ffd600}
-body{font-family:'Manrope',sans-serif;font-size:13px;background:var(--bg);color:var(--text-secondary);overflow:hidden;height:100vh;width:100vw;user-select:none}
-input,select,button,textarea{font-family:inherit;font-size:inherit}
-
-/* Sidebar */
-.sidebar{position:fixed;top:0;left:0;width:56px;height:100vh;display:flex;flex-direction:column;align-items:center;padding:16px 0 12px;z-index:100;border-right:1px solid var(--surface-600);background:var(--surface-800);backdrop-filter:blur(12px)}
-.sidebar-logo{margin-bottom:24px;color:var(--text-muted);font-size:10px;font-weight:700;letter-spacing:.08em;font-family:'JetBrains Mono',monospace}
-.sidebar-nav{display:flex;flex-direction:column;gap:6px;flex:1;overflow-y:auto;scrollbar-width:none}
-.sidebar-nav::-webkit-scrollbar{display:none}
-.sidebar-link{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);transition:all .2s;text-decoration:none;position:relative;flex-shrink:0}
-.sidebar-link:hover{color:var(--text-secondary);background:rgba(255,255,255,.04)}
-.sidebar-link.active{color:var(--accent);background:var(--accent-bg)}
-.sidebar-link.active::before{content:'';position:absolute;left:-8px;top:50%;transform:translateY(-50%);width:3px;height:20px;border-radius:0 3px 3px 0;background:var(--accent)}
-
-/* Main layout */
-.editor-wrap{margin-left:56px;height:100vh;display:flex;flex-direction:column}
-
-/* Toolbar */
-.toolbar{height:44px;background:var(--surface-800);border-bottom:1px solid var(--surface-600);display:flex;align-items:center;padding:0 12px;gap:4px;flex-shrink:0;z-index:20}
-.toolbar-group{display:flex;align-items:center;gap:2px}
-.toolbar-sep{width:1px;height:24px;background:var(--surface-600);margin:0 6px}
-.tb{width:34px;height:34px;border:none;border-radius:8px;background:transparent;color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;position:relative}
-.tb:hover{color:#fff;background:rgba(255,255,255,.08)}
-.tb.active{color:var(--accent);background:var(--accent-bg)}
-.tb:disabled{opacity:.3;cursor:default;pointer-events:none}
-.tb svg{width:18px;height:18px}
-.toolbar-right{margin-left:auto;display:flex;align-items:center;gap:4px}
-
-/* Tool Options Bar */
-.tool-options{height:36px;background:var(--surface-700);border-bottom:1px solid var(--surface-600);display:none;align-items:center;padding:0 12px;gap:8px;flex-shrink:0;z-index:19}
-.tool-options.visible{display:flex}
-.tool-options label{font-size:11px;color:var(--text-muted);white-space:nowrap;font-family:'JetBrains Mono',monospace}
-.tool-options input[type="range"]{width:80px;accent-color:var(--accent);height:4px;cursor:pointer}
-.tool-options input[type="number"]{width:60px;background:var(--surface-600);border:1px solid transparent;color:var(--text-secondary);padding:3px 6px;border-radius:5px;text-align:center;font-family:'JetBrains Mono',monospace;font-size:11px}
-.tool-options input[type="number"]:focus{border-color:var(--accent);outline:none}
-.tool-options input[type="text"]{width:120px;background:var(--surface-600);border:1px solid transparent;color:var(--text-secondary);padding:3px 6px;border-radius:5px;font-family:'JetBrains Mono',monospace;font-size:11px}
-.tool-options input[type="text"]:focus{border-color:var(--accent);outline:none}
-.tool-options select{background:var(--surface-600);border:1px solid transparent;color:var(--text-secondary);padding:3px 8px;border-radius:5px;cursor:pointer;font-size:11px}
-.tool-options select:focus{border-color:var(--accent);outline:none}
-.tool-options .opt-sep{width:1px;height:20px;background:var(--surface-600)}
-.opt-btn{padding:3px 10px;border:1px solid var(--surface-600);border-radius:5px;background:transparent;color:var(--text-secondary);cursor:pointer;font-size:11px;transition:all .15s}
-.opt-btn:hover{border-color:var(--text-muted)}
-.opt-btn.primary{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}
-.opt-btn.primary:hover{background:var(--accent-dim)}
-
-/* Color swatch */
-.color-swatch{width:28px;height:28px;border-radius:6px;overflow:hidden;border:2px solid var(--surface-600);cursor:pointer;position:relative}
-.color-swatch input[type="color"]{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);cursor:pointer;border:none;padding:0}
-
-/* Viewport */
-.viewport{flex:1;overflow:hidden;position:relative;background:#2c2c30}
-#svgCanvas{background:#fff;box-shadow:0 2px 20px rgba(0,0,0,.4)}
-.viewport svg{position:absolute;transform-origin:0 0;cursor:crosshair}
-
-/* Grid dots */
-.grid-dots{position:absolute;inset:0;pointer-events:none;z-index:1}
-
-/* Selection box */
-
-/* Tab Bar */
-.tab-bar{height:30px;background:var(--surface-800);border-bottom:1px solid var(--surface-600);display:flex;align-items:stretch;overflow-x:auto;overflow-y:hidden;flex-shrink:0;scrollbar-width:none;z-index:18}
-.tab-bar::-webkit-scrollbar{display:none}
-.tab-item{display:flex;align-items:center;gap:5px;padding:0 8px 0 12px;border-right:1px solid var(--surface-600);white-space:nowrap;cursor:pointer;font-size:11px;font-family:'JetBrains Mono',monospace;color:var(--text-muted);flex-shrink:0;max-width:160px;transition:color .15s;position:relative}
-.tab-item:hover{color:var(--text-secondary);background:rgba(255,255,255,.03)}
-.tab-item.active{color:var(--text-primary);background:var(--surface-700);border-bottom:2px solid var(--accent)}
-.tab-name{flex:1;overflow:hidden;text-overflow:ellipsis;min-width:40px}
-.tab-close{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:14px;line-height:1;padding:0 2px;border-radius:3px}
-.tab-close:hover{color:var(--text-secondary);background:rgba(255,255,255,.08)}
-.tab-add{width:30px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);cursor:pointer;border:none;background:none;font-size:16px;transition:color .15s}
-.tab-add:hover{color:var(--text-secondary)}
-
-/* Inline text editor */
-.text-edit-overlay{position:absolute;z-index:15;display:none}
-.text-edit-input{background:rgba(0,84,230,0.05);border:1.5px solid var(--accent);outline:none;padding:2px 4px;font-family:'Manrope',sans-serif;color:#000;resize:none;min-width:20px;white-space:pre;overflow:hidden;border-radius:2px;box-shadow:0 0 0 3px rgba(0,84,230,0.1)}
-
-
-/* Context Menu */
-
-.lp-layer{display:flex;align-items:center;gap:6px;padding:7px 10px;font-size:11px;font-family:'JetBrains Mono',monospace;color:var(--text-secondary);cursor:pointer;border-bottom:1px solid rgba(255,255,255,.04);transition:background .1s;font-weight:600}
-.lp-layer:hover{background:rgba(255,255,255,.03)}
-.lp-layer.active{background:var(--accent-bg);color:var(--accent);border-left:2px solid var(--accent)}
-.lp-layer .lp-name{flex:1}
-.lp-child{display:flex;align-items:center;gap:6px;padding:4px 10px 4px 24px;font-size:10px;font-family:'JetBrains Mono',monospace;color:var(--text-muted);cursor:pointer;border-bottom:1px solid rgba(255,255,255,.02);transition:background .1s}
-.lp-child:hover{background:rgba(255,255,255,.03)}
-.lp-child.selected{color:var(--accent);background:rgba(0,84,230,.05)}
-.lp-add-layer{display:flex;align-items:center;justify-content:center;gap:4px;padding:8px;font-size:11px;font-family:'JetBrains Mono',monospace;color:var(--text-muted);cursor:pointer;border-top:1px solid var(--surface-600);transition:all .15s}
-.lp-add-layer:hover{color:var(--text-secondary);background:rgba(255,255,255,.03)}
-.lp-lock{opacity:.5;font-size:10px;cursor:pointer;padding:0 2px}.lp-lock:hover{opacity:1}.lp-lock.locked{opacity:1;color:var(--accent)}
-.ctx-menu{position:absolute;z-index:50;background:var(--surface-700);border:1px solid var(--surface-600);border-radius:8px;padding:4px 0;min-width:180px;display:none;box-shadow:0 8px 24px rgba(0,0,0,.3)}
-.ctx-menu.visible{display:block}
-.ctx-item{display:flex;align-items:center;gap:8px;padding:6px 14px;font-size:12px;font-family:'JetBrains Mono',monospace;color:var(--text-secondary);cursor:pointer;transition:all .1s}
-.ctx-item:hover{background:rgba(0,84,230,.1);color:var(--text-primary)}
-.ctx-item.disabled{opacity:.3;pointer-events:none}
-.ctx-sep{height:1px;background:var(--surface-600);margin:4px 0}
-.ctx-shortcut{margin-left:auto;font-size:10px;color:var(--text-muted)}
-
-@keyframes pulse-close{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
-.sh{position:absolute;width:8px;height:8px;background:#0054e6;border:1px solid #fff;border-radius:1px;pointer-events:auto;z-index:6}
-.sel-box{position:absolute;border:1.5px solid var(--accent);background:rgba(0,84,230,0.05);pointer-events:none;z-index:5}
-.sel-handle{position:absolute;width:8px;height:8px;background:var(--accent);border:1px solid #fff;border-radius:1px;z-index:6;cursor:pointer}
-
-/* Properties Panel (slide-in from right) */
-.props-panel{position:absolute;top:0;right:0;width:240px;height:100%;background:var(--surface-800);border-left:1px solid var(--surface-600);z-index:10;display:none;flex-direction:column;overflow-y:auto}
-.props-panel.visible{display:flex}
-.pp-header{padding:10px 14px;font-size:11px;font-weight:700;font-family:'JetBrains Mono',monospace;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--surface-600);display:flex;justify-content:space-between;align-items:center}
-.pp-close{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:16px;line-height:1}
-.pp-close:hover{color:var(--text-secondary)}
-.pp-section{padding:10px 14px;border-bottom:1px solid var(--surface-600)}
-.pp-section-title{font-size:10px;font-family:'JetBrains Mono',monospace;color:var(--text-muted);text-transform:uppercase;margin-bottom:8px;letter-spacing:.05em}
-.pp-row{display:flex;align-items:center;gap:6px;margin-bottom:6px}
-.pp-label{font-size:11px;font-family:'JetBrains Mono',monospace;color:var(--text-muted);width:24px;flex-shrink:0}
-.pp-input{flex:1;background:var(--surface-600);border:1px solid transparent;color:var(--text-secondary);padding:4px 6px;border-radius:5px;font-family:'JetBrains Mono',monospace;font-size:11px;height:26px}
-.pp-input:focus{border-color:var(--accent);outline:none}
-.pp-color{width:26px;height:26px;border-radius:5px;border:1px solid var(--surface-600);cursor:pointer;padding:0;flex-shrink:0}
-
-/* Layers Panel */
-.layer-panel{position:absolute;top:0;right:0;width:220px;height:100%;background:var(--surface-800);border-left:1px solid var(--surface-600);z-index:10;display:none;flex-direction:column}
-.layer-panel.visible{display:flex}
-.lp-header{padding:8px 12px;font-size:11px;font-weight:700;font-family:'JetBrains Mono',monospace;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--surface-600);display:flex;justify-content:space-between;align-items:center}
-.lp-actions{display:flex;gap:2px}
-.lp-act{width:24px;height:24px;border:none;border-radius:5px;background:transparent;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all .1s}
-.lp-act:hover{color:var(--text-secondary);background:rgba(255,255,255,.05)}
-.lp-list{flex:1;overflow-y:auto;scrollbar-width:thin}
-.lp-item{display:flex;align-items:center;gap:6px;padding:6px 10px;font-size:11px;font-family:'JetBrains Mono',monospace;color:var(--text-secondary);cursor:pointer;border-bottom:1px solid rgba(255,255,255,.03);transition:background .1s}
-.lp-item:hover{background:rgba(255,255,255,.03)}
-.lp-item.selected{background:var(--accent-bg);color:var(--accent)}
-.lp-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.lp-btn{width:20px;height:20px;border:none;border-radius:4px;background:transparent;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .1s}
-.lp-btn:hover{color:var(--text-secondary);background:rgba(255,255,255,.05)}
-
-/* Status Bar */
-.statusbar{height:28px;background:var(--surface-800);border-top:1px solid var(--surface-600);display:flex;align-items:center;padding:0 12px;gap:16px;flex-shrink:0;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text-secondary)}
-.statusbar span{white-space:nowrap}
-.status-accent{color:var(--accent)}
-
-/* AI Modal */
-.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:200;display:none;align-items:center;justify-content:center}
-.modal-overlay.visible{display:flex}
-.modal{background:var(--surface-700);border:1px solid var(--surface-600);border-radius:12px;padding:24px;width:560px;max-width:90vw;max-height:85vh;overflow-y:auto}
-.modal h3{font-size:16px;color:var(--text-primary);margin-bottom:16px;font-weight:600}
-.modal-row{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
-.modal-row input,.modal-row select{background:var(--surface-600);border:1px solid transparent;color:var(--text-secondary);padding:6px 10px;border-radius:6px;font-size:12px}
-.modal-row input:focus,.modal-row select:focus{border-color:var(--accent);outline:none}
-.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
-.modal-actions button{padding:6px 16px;border-radius:6px;border:1px solid var(--surface-600);background:transparent;color:var(--text-secondary);cursor:pointer;font-size:12px;font-weight:500;transition:all .15s}
-.modal-actions button:hover{border-color:var(--text-muted)}
-.modal-actions button.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
-.modal-actions button.primary:hover{background:var(--accent-dim)}
-.icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px;max-height:280px;overflow-y:auto;padding:4px 0}
-.icon-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border-radius:8px;border:1px solid transparent;cursor:pointer;transition:all .12s}
-.icon-card:hover{border-color:var(--surface-600);background:rgba(255,255,255,.03)}
-.icon-card.selected{border-color:var(--accent);background:var(--accent-bg)}
-.icon-card span{font-size:9px;font-family:'JetBrains Mono',monospace;color:var(--text-muted);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}
-
-/* Dropzone for SVG import */
-.dropzone{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10;cursor:pointer;transition:background .2s}
-.dropzone:hover{background:rgba(0,84,230,0.03)}
-.dropzone.drag-over{background:rgba(0,84,230,0.06);border:2px dashed var(--accent)}
-.dropzone.hidden{display:none}
-.dropzone-icon{width:64px;height:64px;border-radius:16px;background:var(--surface-700);border:2px dashed var(--surface-600);display:flex;align-items:center;justify-content:center;margin-bottom:16px;transition:all .3s}
-.dropzone:hover .dropzone-icon{border-color:var(--accent);background:var(--accent-bg)}
-.dropzone-icon svg{color:var(--text-muted);width:28px;height:28px}
-.dropzone-text{font-size:15px;color:var(--text-secondary);margin-bottom:6px;font-weight:500}
-.dropzone-hint{font-size:12px;color:var(--text-muted)}
-</style>
-</head>
-<body>
-
-<!-- Sidebar -->
-<nav class="sidebar">
-    <div class="sidebar-logo">IW</div>
-    <div class="sidebar-nav">
-        <a href="/" class="sidebar-link" title="Главная"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/></svg></a>
-        <a href="/compress" class="sidebar-link" title="Картинки"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0023.25 18.75V5.25A2.25 2.25 0 0021 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z"/></svg></a>
-        <a href="/md" class="sidebar-link" title="Markdown"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/></svg></a>
-        <a href="/placeholder" class="sidebar-link" title="Placeholder"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714a2.25 2.25 0 00.659 1.591L19 14.5M14.25 3.104c.251.023.501.05.75.082M19 14.5l-2.47 2.47a2.25 2.25 0 01-1.59.659H9.06a2.25 2.25 0 01-1.591-.659L5 14.5m14 0V17a2.25 2.25 0 01-2.25 2.25H7.25A2.25 2.25 0 015 17v-2.5"/></svg></a>
-        <a href="/parser" class="sidebar-link" title="Parser"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m9.86-2.06a4.5 4.5 0 00-6.364-6.364L6.257 6.514a4.5 4.5 0 001.242 7.244"/></svg></a>
-        <a href="/password" class="sidebar-link" title="Password"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"/></svg></a>
-        <a href="/sanitizer" class="sidebar-link" title="Sanitizer"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg></a>
-        <a href="/converter" class="sidebar-link" title="Converter"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"/></svg></a>
-        <a href="/formatter" class="sidebar-link" title="Formatter"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"/></svg></a>
-        <a href="/editor" class="sidebar-link" title="Editor"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"/></svg></a>
-        <a href="/httpclient" class="sidebar-link" title="HTTP Client"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"/></svg></a>
-        <a href="/redirects" class="sidebar-link" title="Redirect Analyzer"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg></a>
-        <a href="/svgeditor" class="sidebar-link active" title="SVG Редактор"><svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 00-5.78 1.128 2.25 2.25 0 01-2.4 2.245 4.5 4.5 0 008.4-2.245c0-.399-.078-.78-.22-1.128zm0 0a15.998 15.998 0 003.388-1.62m-5.043-.025a15.994 15.994 0 011.622-3.395m3.42 3.42a15.995 15.995 0 004.764-4.648l3.876-5.814a1.151 1.151 0 00-1.597-1.597L14.146 6.32a15.996 15.996 0 00-4.649 4.763m3.42 3.42a6.776 6.776 0 00-3.42-3.42"/></svg></a>
-    </div>
-</nav>
-
-<!-- Editor -->
-<div class="editor-wrap">
-    <!-- Toolbar -->
-    <div class="toolbar">
-        <div class="toolbar-group">
-            <button class="tb" id="btnNew" title="Новый холст (Ctrl+N)"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/></svg></button>
-            <button class="tb" id="btnImport" title="Импорт SVG (Ctrl+O)"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 00-1.883 2.542l.857 6a2.25 2.25 0 002.227 1.932H19.05a2.25 2.25 0 002.227-1.932l.857-6a2.25 2.25 0 00-1.883-2.542m-16.5 0V6A2.25 2.25 0 016 3.75h3.879a1.5 1.5 0 011.06.44l2.122 2.12a1.5 1.5 0 001.06.44H18A2.25 2.25 0 0120.25 9v.776"/></svg></button>
-            <button class="tb" id="btnExportSvg" title="Экспорт SVG (Ctrl+S)"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/></svg></button>
-            <button class="tb" id="btnExportPng" title="Экспорт PNG"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0023.25 18.75V5.25A2.25 2.25 0 0021 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z"/></svg></button>
-        </div>
-        <div class="toolbar-sep"></div>
-
-        <!-- Drawing tools -->
-        <div class="toolbar-group" id="toolsGroup">
-            <button class="tb active" data-tool="select" title="Выделение (V)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.042 21.672L13.684 16.6m0 0l-2.51 2.225.569-9.47 5.227 7.917-3.286-.672zM12 2.25V4.5m5.834.166l-1.591 1.591M20.25 10.5H18M7.757 14.743l-1.59 1.59M6 10.5H3.75m4.007-4.243l-1.59-1.59"/></svg></button>
-            <button class="tb" data-tool="rect" title="Прямоугольник (R)"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
-            <button class="tb" data-tool="circle" title="Эллипс (O)"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><ellipse cx="12" cy="12" rx="9" ry="9"/></svg></button>
-            <button class="tb" data-tool="line" title="Линия (L)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><line x1="5" y1="19" x2="19" y2="5" stroke-linecap="round"/></svg></button>
-            <button class="tb" data-tool="path" title="Перо (P)"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 00-5.78 1.128 2.25 2.25 0 01-2.4 2.245 4.5 4.5 0 008.4-2.245c0-.399-.078-.78-.22-1.128zm0 0a15.998 15.998 0 003.388-1.62m-5.043-.025a15.994 15.994 0 011.622-3.395m3.42 3.42a15.995 15.995 0 004.764-4.648l3.876-5.814a1.151 1.151 0 00-1.597-1.597L14.146 6.32a15.996 15.996 0 00-4.649 4.763m3.42 3.42a6.776 6.776 0 00-3.42-3.42"/></svg></button>
-            <button class="tb" data-tool="text" title="Текст (T)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M7 4h10M12 4v16m-4 0h8"/></svg></button>
-        </div>
-        <div class="toolbar-sep"></div>
-
-        <!-- Transform -->
-        <div class="toolbar-group">
-            <button class="tb" id="btnFront" title="На передний план"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 19.5v-15m0 0l-6.75 6.75M12 4.5l6.75 6.75"/></svg></button>
-            <button class="tb" id="btnBack" title="На задний план"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m0 0l6.75-6.75M12 19.5l-6.75-6.75"/></svg></button>
-            <button class="tb" id="btnDuplicate" title="Дублировать (Ctrl+D)"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75"/><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 3h9.75a1.125 1.125 0 011.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125H8.25a1.125 1.125 0 01-1.125-1.125v-9.75c0-.621.504-1.125 1.125-1.125z"/></svg></button>
-            <button class="tb" id="btnDelete" title="Удалить (Del)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/></svg></button>
-            <button class="tb" id="btnRasterize" title="Текст → контур (path)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0023.25 18.75V5.25A2.25 2.25 0 0021 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z"/></svg></button>
-        <button class="tb" id="btnOptimize" title="Оптимизировать SVG"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z"/></svg></button>
-        </div>
-        <div class="toolbar-sep"></div>
-
-        <!-- Align -->
-        <div class="toolbar-group">
-            <button class="tb" id="btnAlignL" title="Выровнять по левому краю"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><line x1="4" y1="3" x2="4" y2="21"/><rect x="7" y="5" width="13" height="4" rx="1"/><rect x="7" y="13" width="8" height="4" rx="1"/></svg></button>
-            <button class="tb" id="btnAlignCX" title="Выровнять по центру (гориз.)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><line x1="12" y1="3" x2="12" y2="21" stroke-dasharray="2 2"/><rect x="5" y="5" width="14" height="4" rx="1"/><rect x="7" y="13" width="10" height="4" rx="1"/></svg></button>
-            <button class="tb" id="btnAlignR" title="Выровнять по правому краю"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><line x1="20" y1="3" x2="20" y2="21"/><rect x="4" y="5" width="13" height="4" rx="1"/><rect x="9" y="13" width="8" height="4" rx="1"/></svg></button>
-            <button class="tb" id="btnAlignT" title="Выровнять по верхнему краю"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><line x1="3" y1="4" x2="21" y2="4"/><rect x="5" y="7" width="4" height="13" rx="1"/><rect x="13" y="7" width="4" height="8" rx="1"/></svg></button>
-            <button class="tb" id="btnAlignCY" title="Выровнять по центру (верт.)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><line x1="3" y1="12" x2="21" y2="12" stroke-dasharray="2 2"/><rect x="5" y="5" width="4" height="14" rx="1"/><rect x="13" y="7" width="4" height="10" rx="1"/></svg></button>
-            <button class="tb" id="btnAlignB" title="Выровнять по нижнему краю"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><line x1="3" y1="20" x2="21" y2="20"/><rect x="5" y="4" width="4" height="13" rx="1"/><rect x="13" y="9" width="4" height="8" rx="1"/></svg></button>
-        </div>
-        <div class="toolbar-sep"></div>
-
-        <!-- Undo/Redo -->
-        <div class="toolbar-group">
-            <button class="tb" id="btnUndo" title="Отменить (Ctrl+Z)"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3"/></svg></button>
-            <button class="tb" id="btnRedo" title="Повторить (Ctrl+Shift+Z)"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 15l6-6m0 0l-6-6m6 6H9a6 6 0 000 12h3"/></svg></button>
-        </div>
-
-        <!-- Right side -->
-        <div class="toolbar-right">
-            <button class="tb" id="btnDevMode" title="SVG Код"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"/></svg></button>
-            <button class="tb" id="btnAI" title="AI Генератор иконок"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.455 2.456L21.75 6l-1.036.259a3.375 3.375 0 00-2.455 2.456z"/></svg></button>
-            <button class="tb" id="btnProps" title="Свойства"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75"/></svg></button>
-            <button class="tb" id="btnLayers" title="Слои"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2.25l9.75 5.25L12 12.75 2.25 7.5 12 2.25z"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l9.75 5.25L21.75 12"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 16.5l9.75 5.25 9.75-5.25"/></svg></button>
-            <div class="toolbar-sep"></div>
-            <div class="color-swatch" id="fillSwatch" title="Заливка">
-                <input type="color" id="fillColor" value="#0054e6">
-            </div>
-            <div class="color-swatch" id="strokeSwatch" title="Обводка">
-                <input type="color" id="strokeColor" value="#333333">
-            </div>
-            <div class="toolbar-sep"></div>
-            <button class="tb" id="btnZoomOut" title="Zoom Out"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607zM13.5 10.5h-6"/></svg></button>
-            <span id="zoomLabel" style="font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-muted);min-width:40px;text-align:center">100%</span>
-            <button class="tb" id="btnZoomIn" title="Zoom In"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607zM10.5 7.5v6m3-3h-6"/></svg></button>
-            <button class="tb" id="btnFit" title="По размеру (Ctrl+0)"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m9 0h4.5v4.5m0 9v4.5h-4.5m-9 0H3.75v-4.5"/></svg></button>
-        </div>
-    </div>
-
-    <!-- Tool Options (context-sensitive) -->
-    <div class="tool-options" id="toolOptions"></div>
-
-    <!-- Tab Bar -->
-    <div class="tab-bar" id="tabBar"></div>
-
-    <!-- Viewport -->
-    <div class="viewport" id="viewport">
-        <svg id="svgCanvas" xmlns="http://www.w3.org/2000/svg" width="800" height="600" viewBox="0 0 800 600" ></svg>
-
-        <!-- Pen points preview -->
-        <div id="penPoints" style="display:none;position:absolute;pointer-events:none;z-index:4"></div>
-
-        <!-- Context Menu -->
-        <div class="ctx-menu" id="ctxMenu">
-            <div class="ctx-item" data-action="copy">Копировать<span class="ctx-shortcut">Ctrl+C</span></div>
-            <div class="ctx-item" data-action="cut">Вырезать<span class="ctx-shortcut">Ctrl+X</span></div>
-            <div class="ctx-item" data-action="paste">Вставить<span class="ctx-shortcut">Ctrl+V</span></div>
-            <div class="ctx-sep"></div>
-            <div class="ctx-item" data-action="duplicate">Дублировать<span class="ctx-shortcut">Ctrl+D</span></div>
-            <div class="ctx-item" data-action="delete">Удалить<span class="ctx-shortcut">Del</span></div>
-            <div class="ctx-sep"></div>
-            <div class="ctx-item" data-action="front">На передний план</div>
-            <div class="ctx-item" data-action="back">На задний план</div>
-            <div class="ctx-sep"></div>
-            <div class="ctx-item" data-action="group">Группировать<span class="ctx-shortcut">Ctrl+G</span></div>
-            <div class="ctx-item" data-action="ungroup">Разгруппировать<span class="ctx-shortcut">Ctrl+Shift+G</span></div>
-            <div class="ctx-sep"></div>
-            <div class="ctx-item" data-action="rasterize">Текст → контур</div>
-        </div>
-
-        <!-- Marquee selection -->
-        <div id="marquee" style="display:none;position:absolute;border:1.5px dashed #0054e6;background:rgba(0,84,230,0.08);pointer-events:none;z-index:4;border-radius:2px"></div>
-
-        <!-- Inline text editor -->
-        <div class="text-edit-overlay" id="textEditOverlay"><textarea class="text-edit-input" id="textEditInput"></textarea></div>
-
-        <!-- Selection handles -->
-        <div id="selHandles" style="display:none;position:absolute;pointer-events:none;z-index:5">
-            <div style="position:absolute;inset:-1px;border:1.5px solid #0054e6;pointer-events:none"></div>
-            <div class="sh" data-h="nw" style="top:-4px;left:-4px;cursor:nw-resize"></div>
-            <div class="sh" data-h="n" style="top:-4px;left:50%;margin-left:-4px;cursor:n-resize"></div>
-            <div class="sh" data-h="ne" style="top:-4px;right:-4px;cursor:ne-resize"></div>
-            <div class="sh" data-h="e" style="top:50%;margin-top:-4px;right:-4px;cursor:e-resize"></div>
-            <div class="sh" data-h="se" style="bottom:-4px;right:-4px;cursor:se-resize"></div>
-            <div class="sh" data-h="s" style="bottom:-4px;left:50%;margin-left:-4px;cursor:s-resize"></div>
-            <div class="sh" data-h="sw" style="bottom:-4px;left:-4px;cursor:sw-resize"></div>
-            <div class="sh" data-h="w" style="top:50%;margin-top:-4px;left:-4px;cursor:w-resize"></div>
-        </div>
-
-        <!-- Drop zone -->
-        <div class="dropzone hidden" id="dropzone">
-            <div class="dropzone-icon">
-                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 00-5.78 1.128 2.25 2.25 0 01-2.4 2.245 4.5 4.5 0 008.4-2.245c0-.399-.078-.78-.22-1.128zm0 0a15.998 15.998 0 003.388-1.62m-5.043-.025a15.994 15.994 0 011.622-3.395m3.42 3.42a15.995 15.995 0 004.764-4.648l3.876-5.814a1.151 1.151 0 00-1.597-1.597L14.146 6.32a15.996 15.996 0 00-4.649 4.763m3.42 3.42a6.776 6.776 0 00-3.42-3.42"/></svg>
-            </div>
-            <div class="dropzone-text">Начните рисовать или импортируйте SVG</div>
-            <div class="dropzone-hint">Выберите инструмент / Ctrl+O / Drag & Drop</div>
-        </div>
-
-        <!-- Properties Panel -->
-        <div class="props-panel" id="propsPanel">
-            <div class="pp-header"><span>Свойства</span><button class="pp-close" id="propsClose">&times;</button></div>
-            <div id="propsBody"></div>
-        </div>
-
-        <!-- Layers Panel -->
-        <div class="layer-panel" id="layerPanel">
-            <div class="lp-header">
-                <span>Слои</span>
-                <div class="lp-actions">
-                    <button class="lp-act" id="lpClear" title="Очистить">&times;</button>
-                </div>
-            </div>
-            <div class="lp-list" id="layerList"></div>
-            <div class="lp-add-layer" id="lpAddLayer">+ Новый слой</div>
-        </div>
-    </div>
-
-    <!-- Status Bar -->
-    <div class="statusbar">
-        <span id="stSize">800 × 600</span>
-        <span id="stZoom" class="status-accent">100%</span>
-        <span id="stCoords">0, 0</span>
-        <span id="stCount">0 элементов</span>
-        <span id="stStatus" style="margin-left:auto">Готово</span>
-    </div>
-</div>
-
-<!-- AI Modal -->
-<div class="modal-overlay" id="aiModal">
-    <div class="modal">
-        <h3>AI Генератор иконок</h3>
-        <div class="modal-row">
-            <input id="aiSearch" type="text" style="flex:1;min-width:150px" placeholder="Поиск: home, star, user...">
-            <select id="aiStyle" style="width:100px"><option value="outline">Контур</option><option value="filled">Заливка</option><option value="duotone">Дуотон</option></select>
-            <select id="aiSize" style="width:70px"><option value="24">24</option><option value="32">32</option><option value="48" selected>48</option><option value="64">64</option><option value="128">128</option></select>
-            <input id="aiColor" type="color" value="#0054e6" style="width:34px;height:34px;border-radius:6px;border:1px solid var(--surface-600);cursor:pointer;padding:0">
-        </div>
-        <div class="icon-grid" id="aiGrid"></div>
-        <div class="modal-actions">
-            <button id="aiCancel">Отмена</button>
-            <button class="primary" id="aiAdd">Добавить на холст</button>
-        </div>
-    </div>
-</div>
-
-
-<!-- New Canvas Modal -->
-<div class="modal-overlay" id="newModal">
-    <div class="modal" style="width:340px">
-        <h3>Новый холст</h3>
-        <div class="modal-row">
-            <label style="width:60px;font-size:12px;color:var(--text-muted)">Ширина</label>
-            <input id="newW" type="number" value="800" min="100" max="4000" style="flex:1">
-            <span style="font-size:11px;color:var(--text-muted)">px</span>
-        </div>
-        <div class="modal-row">
-            <label style="width:60px;font-size:12px;color:var(--text-muted)">Высота</label>
-            <input id="newH" type="number" value="600" min="100" max="4000" style="flex:1">
-            <span style="font-size:11px;color:var(--text-muted)">px</span>
-        </div>
-        <div style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px">
-            <button class="opt-btn" onclick="document.getElementById('newW').value=1920;document.getElementById('newH').value=1080">1920×1080</button>
-            <button class="opt-btn" onclick="document.getElementById('newW').value=1080;document.getElementById('newH').value=1080">1080×1080</button>
-            <button class="opt-btn" onclick="document.getElementById('newW').value=800;document.getElementById('newH').value=600">800×600</button>
-            <button class="opt-btn" onclick="document.getElementById('newW').value=512;document.getElementById('newH').value=512">512×512</button>
-            <button class="opt-btn" onclick="document.getElementById('newW').value=24;document.getElementById('newH').value=24">24×24</button>
-            <button class="opt-btn" onclick="document.getElementById('newW').value=48;document.getElementById('newH').value=48">48×48</button>
-        </div>
-        <div class="modal-actions">
-            <button id="newCancel">Отмена</button>
-            <button class="primary" id="newCreate">Создать</button>
-        </div>
-    </div>
-</div>
-
-
-<!-- Dev Mode Modal -->
-<div class="modal-overlay" id="devModal">
-    <div class="modal" style="width:700px;max-height:90vh">
-        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px">
-            <h3 style="margin:0">SVG Код</h3>
-            <div style="display:flex;gap:6px">
-                <button class="opt-btn" id="devCopy">Копировать</button>
-                <button class="opt-btn" id="devClose">&times;</button>
-            </div>
-        </div>
-        <textarea id="devCode" style="width:100%;height:60vh;background:var(--surface-600);border:1px solid var(--surface-600);color:var(--text-secondary);font-family:'JetBrains Mono',monospace;font-size:11px;padding:12px;border-radius:8px;resize:none;outline:none;tab-size:2" spellcheck="false"></textarea>
-    </div>
-</div>
-
-<input type="file" id="importFile" accept=".svg" style="display:none">
-
-<script>
-(function(){
-    const svg = document.getElementById('svgCanvas');
-    const viewport = document.getElementById('viewport');
-    const dropzone = document.getElementById('dropzone');
-    let currentTool = 'select';
-    let selectedEl = null;
-    let history = [], historyIdx = -1;
-    const MAX_HISTORY = 30;
-    let drawing = false, startX, startY, tempEl = null, pathPoints = [];
-    let zoom = 1, panX = 0, panY = 0;
-    let panning = false, panStartX, panStartY;
-    let fillCol = '#0054e6', strokeCol = '#333333', strokeW = 2;
-
-    // ── Position SVG ──
-    function positionCanvas() {
-        const vw = viewport.clientWidth, vh = viewport.clientHeight;
-        const cw = 800 * zoom, ch = 600 * zoom;
-        const x = Math.max(0, (vw - cw) / 2) + panX;
-        const y = Math.max(0, (vh - ch) / 2) + panY;
-        svg.style.left = x + 'px';
-        svg.style.top = y + 'px';
-        svg.style.width = cw + 'px';
-        svg.style.height = ch + 'px';
-    }
-    positionCanvas();
-    window.addEventListener('resize', () => { positionCanvas(); showHandles(); });
-
-    // ── Zoom ──
-    function setZoom(z) {
-        zoom = Math.max(0.1, Math.min(10, z));
-        positionCanvas();
-        const pct = Math.round(zoom * 100) + '%';
-        document.getElementById('zoomLabel').textContent = pct;
-        document.getElementById('stZoom').textContent = pct;
-        if (selectedEl) showHandles();
-    }
-    document.getElementById('btnZoomIn').addEventListener('click', () => setZoom(zoom * 1.25));
-    document.getElementById('btnZoomOut').addEventListener('click', () => setZoom(zoom / 1.25));
-    document.getElementById('btnFit').addEventListener('click', () => { panX = 0; panY = 0; setZoom(Math.min(viewport.clientWidth / 840, viewport.clientHeight / 640)); });
-    viewport.addEventListener('wheel', (e) => { e.preventDefault(); setZoom(zoom * (e.deltaY < 0 ? 1.08 : 0.92)); }, { passive: false });
-
-    // ── Pan (Space + drag) ──
-    document.addEventListener('keydown', (e) => {
-        if (e.code === 'Space' && !e.repeat && document.activeElement.tagName !== 'INPUT') {
-            e.preventDefault(); svg.style.cursor = 'grab';
-        }
-    });
-    document.addEventListener('keyup', (e) => {
-        if (e.code === 'Space') { svg.style.cursor = currentTool === 'select' ? 'default' : 'crosshair'; }
-    });
-    viewport.addEventListener('mousedown', (e) => {
-        // Only pan on middle-click, space+click, or click on empty viewport area
-        const onCanvas = svg.contains(e.target) || e.target === svg;
-        const spaceHeld = e.getModifierState && e.getModifierState('Space');
-        if (e.button === 1 || (e.button === 0 && spaceHeld) || (e.button === 0 && e.target === viewport)) {
-            panning = true; panStartX = e.clientX - panX; panStartY = e.clientY - panY;
-            svg.style.cursor = 'grabbing'; e.preventDefault();
-        }
-    });
-    viewport.addEventListener('mousemove', (e) => {
-        if (panning) { panX = e.clientX - panStartX; panY = e.clientY - panStartY; positionCanvas(); if (selectedEl) showHandles(); return; }
-        // Update coords
-        try {
-            const pos = getMousePos(e);
-            if (isFinite(pos.x) && isFinite(pos.y)) {
-                document.getElementById('stCoords').textContent = `${Math.round(pos.x)}, ${Math.round(pos.y)}`;
-            }
-        } catch(ex) {}
-    });
-    viewport.addEventListener('mouseup', () => {
-        if (panning) { panning = false; svg.style.cursor = currentTool === 'select' ? 'default' : 'crosshair'; }
-    });
-
-    // ── History ──
-    function pushHistory() {
-        historyIdx++;
-        history = history.slice(0, historyIdx);
-        history.push(svg.innerHTML);
-        if (history.length > MAX_HISTORY) { history.shift(); historyIdx--; }
-        updateLayers();
-        updateCount();
-        if (dropzone && svg.children.length > 0) dropzone.classList.add('hidden');
-    }
-    function undo() { if (historyIdx > 0) { historyIdx--; svg.innerHTML = history[historyIdx]; selectedEl = null; updateProps(); updateLayers(); updateCount(); } }
-    function redo() { if (historyIdx < history.length - 1) { historyIdx++; svg.innerHTML = history[historyIdx]; selectedEl = null; updateProps(); updateLayers(); updateCount(); } }
-    function updateCount() {
-        let count = 0;
-        svg.querySelectorAll('g[data-layer]').forEach(l => { count += l.children.length; });
-        document.getElementById('stCount').textContent = count + ' элементов';
-    }
-    // ── Layer System ──
-    let activeLayer = null;
-
-    function initLayers() {
-        if (!svg.querySelector('g[data-layer]')) {
-            const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-            g.setAttribute('data-layer', 'true');
-            g.setAttribute('data-name', 'Слой 1');
-            // Move existing children into the layer
-            while (svg.firstChild) g.appendChild(svg.firstChild);
-            svg.appendChild(g);
-        }
-        activeLayer = svg.querySelector('g[data-layer]');
-    }
-    initLayers();
-
-    function isLayerLocked(layer) {
-        return layer && layer.getAttribute('data-locked') === '1';
-    }
-
-    function getActiveLayer() {
-        if (!activeLayer || !svg.contains(activeLayer)) {
-            activeLayer = svg.querySelector('g[data-layer]');
-            if (!activeLayer) {
-                const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-                g.setAttribute('data-layer', 'true');
-                g.setAttribute('data-name', 'Слой 1');
-                svg.appendChild(g);
-                activeLayer = g;
-            }
-        }
-        return activeLayer;
-    }
-
-    function addLayer(name) {
-        const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-        g.setAttribute('data-layer', 'true');
-        g.setAttribute('data-name', name || 'Слой ' + (svg.querySelectorAll('g[data-layer]').length + 1));
-        svg.appendChild(g);
-        activeLayer = g;
-        pushHistory();
-        updateLayers();
-        return g;
-    }
-
-    pushHistory();
-
-    // ── Tools ──
-    document.querySelectorAll('#toolsGroup .tb').forEach(btn => {
-        btn.addEventListener('click', () => {
-            currentTool = btn.dataset.tool;
-            document.querySelectorAll('#toolsGroup .tb').forEach(b => b.classList.remove('active'));
-            btn.classList.add('active');
-            svg.style.cursor = currentTool === 'select' ? 'default' : 'crosshair';
-            pathPoints = []; if (typeof hidePenPoints === 'function') hidePenPoints();
-            updateToolOptions();
-        });
-    });
-
-    // ── Tool Options ──
-    let noFill = false, noStroke = false, fillOpacity = 1;
-
-    function updateToolOptions() {
-        const bar = document.getElementById('toolOptions');
-        if (currentTool === 'rect' || currentTool === 'circle' || currentTool === 'line' || currentTool === 'path') {
-            bar.innerHTML = `
-                <label>Заливка:</label>
-                <input type="color" id="optFill" value="${fillCol}" style="width:26px;height:26px;border-radius:5px;border:1px solid var(--surface-600);cursor:pointer;padding:0" ${noFill?'disabled':''}>
-                <button class="opt-btn ${noFill?'':'primary'}" id="optNoFill" style="font-size:10px;padding:2px 6px" title="Без заливки">${noFill?'✗':'✓'}</button>
-                <div class="opt-sep"></div>
-                <label>Непр.:</label>
-                <input type="range" id="optFillOp" min="0" max="1" step="0.05" value="${fillOpacity}" style="width:60px">
-                <span id="optFillOpVal" style="font-size:10px;color:var(--text-muted);min-width:28px">${Math.round(fillOpacity*100)}%</span>
-                <div class="opt-sep"></div>
-                <label>Обводка:</label>
-                <input type="color" id="optStroke" value="${strokeCol}" style="width:26px;height:26px;border-radius:5px;border:1px solid var(--surface-600);cursor:pointer;padding:0" ${noStroke?'disabled':''}>
-                <button class="opt-btn ${noStroke?'':'primary'}" id="optNoStroke" style="font-size:10px;padding:2px 6px" title="Без обводки">${noStroke?'✗':'✓'}</button>
-                <div class="opt-sep"></div>
-                <label>Толщина:</label>
-                <input type="number" id="optStrokeW" value="${strokeW}" min="0" max="50" step="0.5" ${noStroke?'disabled':''}>
-            `;
-            bar.classList.add('visible');
-            document.getElementById('optFill').addEventListener('input', (e) => { fillCol = e.target.value; document.getElementById('fillColor').value = fillCol; applyToSelected(); });
-            document.getElementById('optStroke').addEventListener('input', (e) => { strokeCol = e.target.value; document.getElementById('strokeColor').value = strokeCol; applyToSelected(); });
-            document.getElementById('optStrokeW').addEventListener('input', (e) => { strokeW = parseFloat(e.target.value) || 0; applyToSelected(); });
-            document.getElementById('optFillOp').addEventListener('input', (e) => {
-                fillOpacity = parseFloat(e.target.value);
-                document.getElementById('optFillOpVal').textContent = Math.round(fillOpacity*100)+'%';
-                applyToSelected();
-            });
-            document.getElementById('optNoFill').addEventListener('click', () => { noFill = !noFill; updateToolOptions(); applyToSelected(); });
-            document.getElementById('optNoStroke').addEventListener('click', () => { noStroke = !noStroke; updateToolOptions(); applyToSelected(); });
-        } else if (currentTool === 'text') {
-            bar.innerHTML = `
-                <label>Размер:</label><input type="number" id="optFontSize" value="20" min="6" max="400" style="width:50px">
-                <div class="opt-sep"></div>
-                <label>Шрифт:</label><select id="optFontFamily" style="width:120px">
-                    <option value="Manrope, sans-serif">Manrope</option>
-                    <option value="'JetBrains Mono', monospace">JetBrains Mono</option>
-                    <option value="Arial, sans-serif">Arial</option>
-                    <option value="Georgia, serif">Georgia</option>
-                    <option value="'Times New Roman', serif">Times New Roman</option>
-                    <option value="'Courier New', monospace">Courier New</option>
-                    <option value="Verdana, sans-serif">Verdana</option>
-                    <option value="Impact, sans-serif">Impact</option>
-                </select>
-                <div class="opt-sep"></div>
-                <label>Цвет:</label><input type="color" id="optTextColor" value="${fillCol}" style="width:26px;height:26px;border-radius:5px;border:1px solid var(--surface-600);cursor:pointer;padding:0">
-                <div class="opt-sep"></div>
-                <label>Межбукв.:</label><input type="number" id="optLetterSpacing" value="0" min="-5" max="20" step="0.5" style="width:50px">
-                <div class="opt-sep"></div>
-                <label>Жирный:</label><select id="optFontWeight" style="width:70px">
-                    <option value="400">400</option>
-                    <option value="500">500</option>
-                    <option value="600">600</option>
-                    <option value="700" selected>700</option>
-                    <option value="800">800</option>
-                    <option value="900">900</option>
-                </select>
-            `;
-            bar.classList.add('visible');
-        } else if (currentTool === 'select' && selectedEl) {
-            // Show selected element options
-            const tag = selectedEl.tagName;
-            if (tag === 'rect' || tag === 'ellipse' || tag === 'line' || tag === 'path') {
-                const elFill = selectedEl.getAttribute('fill') || 'none';
-                const elStroke = selectedEl.getAttribute('stroke') || 'none';
-                const elSW = selectedEl.getAttribute('stroke-width') || '2';
-                const elOp = selectedEl.getAttribute('fill-opacity') || '1';
-                const isNoFill = elFill === 'none';
-                const isNoStroke = elStroke === 'none';
-                bar.innerHTML = `
-                    <label>Заливка:</label>
-                    <input type="color" id="optFill" value="${isNoFill?'#000000':elFill}" style="width:26px;height:26px;border-radius:5px;border:1px solid var(--surface-600);cursor:pointer;padding:0" ${isNoFill?'disabled':''}>
-                    <button class="opt-btn ${isNoFill?'':'primary'}" id="optNoFill" style="font-size:10px;padding:2px 6px">${isNoFill?'✗':'✓'}</button>
-                    <div class="opt-sep"></div>
-                    <label>Непр.:</label>
-                    <input type="range" id="optFillOp" min="0" max="1" step="0.05" value="${elOp}" style="width:60px">
-                    <span id="optFillOpVal" style="font-size:10px;color:var(--text-muted);min-width:28px">${Math.round(parseFloat(elOp)*100)}%</span>
-                    <div class="opt-sep"></div>
-                    <label>Обводка:</label>
-                    <input type="color" id="optStroke" value="${isNoStroke?'#000000':elStroke}" style="width:26px;height:26px;border-radius:5px;border:1px solid var(--surface-600);cursor:pointer;padding:0" ${isNoStroke?'disabled':''}>
-                    <button class="opt-btn ${isNoStroke?'':'primary'}" id="optNoStroke" style="font-size:10px;padding:2px 6px">${isNoStroke?'✗':'✓'}</button>
-                    <div class="opt-sep"></div>
-                    <label>Толщина:</label>
-                    <input type="number" id="optStrokeW" value="${elSW}" min="0" max="50" step="0.5" ${isNoStroke?'disabled':''}>
-                `;
-                bar.classList.add('visible');
-                document.getElementById('optFill').addEventListener('input', (e) => { selectedEl.setAttribute('fill', e.target.value); });
-                document.getElementById('optStroke').addEventListener('input', (e) => { selectedEl.setAttribute('stroke', e.target.value); });
-                document.getElementById('optStrokeW').addEventListener('input', (e) => { selectedEl.setAttribute('stroke-width', e.target.value); });
-                document.getElementById('optFillOp').addEventListener('input', (e) => {
-                    selectedEl.setAttribute('fill-opacity', e.target.value);
-                    document.getElementById('optFillOpVal').textContent = Math.round(parseFloat(e.target.value)*100)+'%';
-                });
-                document.getElementById('optNoFill').addEventListener('click', () => {
-                    const cur = selectedEl.getAttribute('fill');
-                    if (cur === 'none') { selectedEl.setAttribute('fill', fillCol); } else { selectedEl.setAttribute('fill', 'none'); }
-                    pushHistory(); updateToolOptions();
-                });
-                document.getElementById('optNoStroke').addEventListener('click', () => {
-                    const cur = selectedEl.getAttribute('stroke');
-                    if (cur === 'none') { selectedEl.setAttribute('stroke', strokeCol); selectedEl.setAttribute('stroke-width', strokeW); } else { selectedEl.setAttribute('stroke', 'none'); }
-                    pushHistory(); updateToolOptions();
-                });
-            } else if (tag === 'text') {
-                const elFS = selectedEl.getAttribute('font-size') || '20';
-                const elFF = selectedEl.getAttribute('font-family') || 'Manrope, sans-serif';
-                const elFill = selectedEl.getAttribute('fill') || '#000';
-                const elLS = selectedEl.getAttribute('letter-spacing') || '0';
-                const elFW = selectedEl.getAttribute('font-weight') || '400';
-                bar.innerHTML = `
-                    <label>Размер:</label><input type="number" id="optFontSize" value="${elFS}" min="6" max="400" style="width:50px">
-                    <div class="opt-sep"></div>
-                    <label>Шрифт:</label><select id="optFontFamily" style="width:120px">
-                        <option value="Manrope, sans-serif" ${elFF.includes('Manrope')?'selected':''}>Manrope</option>
-                        <option value="'JetBrains Mono', monospace" ${elFF.includes('JetBrains')?'selected':''}>JetBrains Mono</option>
-                        <option value="Arial, sans-serif" ${elFF.includes('Arial')?'selected':''}>Arial</option>
-                        <option value="Georgia, serif" ${elFF.includes('Georgia')?'selected':''}>Georgia</option>
-                        <option value="'Times New Roman', serif" ${elFF.includes('Times')?'selected':''}>Times New Roman</option>
-                        <option value="'Courier New', monospace" ${elFF.includes('Courier')?'selected':''}>Courier New</option>
-                        <option value="Verdana, sans-serif" ${elFF.includes('Verdana')?'selected':''}>Verdana</option>
-                        <option value="Impact, sans-serif" ${elFF.includes('Impact')?'selected':''}>Impact</option>
-                    </select>
-                    <div class="opt-sep"></div>
-                    <label>Цвет:</label><input type="color" id="optTextColor" value="${elFill}" style="width:26px;height:26px;border-radius:5px;border:1px solid var(--surface-600);cursor:pointer;padding:0">
-                    <div class="opt-sep"></div>
-                    <label>Межбукв.:</label><input type="number" id="optLetterSpacing" value="${elLS}" min="-5" max="20" step="0.5" style="width:50px">
-                    <div class="opt-sep"></div>
-                    <label>Жирность:</label><select id="optFontWeight" style="width:70px">
-                        <option value="400" ${elFW==='400'?'selected':''}>400</option>
-                        <option value="500" ${elFW==='500'?'selected':''}>500</option>
-                        <option value="600" ${elFW==='600'?'selected':''}>600</option>
-                        <option value="700" ${elFW==='700'?'selected':''}>700</option>
-                        <option value="800" ${elFW==='800'?'selected':''}>800</option>
-                        <option value="900" ${elFW==='900'?'selected':''}>900</option>
-                    </select>
-                `;
-                bar.classList.add('visible');
-                document.getElementById('optFontSize').addEventListener('input', (e) => { selectedEl.setAttribute('font-size', e.target.value); showHandles(); });
-                document.getElementById('optFontFamily').addEventListener('change', (e) => { selectedEl.setAttribute('font-family', e.target.value); showHandles(); });
-                document.getElementById('optTextColor').addEventListener('input', (e) => { selectedEl.setAttribute('fill', e.target.value); });
-                document.getElementById('optLetterSpacing').addEventListener('input', (e) => { selectedEl.setAttribute('letter-spacing', e.target.value); showHandles(); });
-                document.getElementById('optFontWeight').addEventListener('change', (e) => { selectedEl.setAttribute('font-weight', e.target.value); showHandles(); });
-            } else {
-                bar.innerHTML = '';
-                bar.classList.remove('visible');
-            }
-        } else {
-            bar.innerHTML = '';
-            bar.classList.remove('visible');
-        }
-    }
-
-    function applyToSelected() {
-        if (!selectedEl) return;
-        const tag = selectedEl.tagName;
-        if (tag === 'rect' || tag === 'ellipse' || tag === 'line' || tag === 'path') {
-            selectedEl.setAttribute('fill', noFill ? 'none' : fillCol);
-            selectedEl.setAttribute('fill-opacity', fillOpacity);
-            selectedEl.setAttribute('stroke', noStroke ? 'none' : strokeCol);
-            selectedEl.setAttribute('stroke-width', strokeW);
-            pushHistory();
-        }
-    }
-
-    // ── SVG Helpers ──
-    function svgEl(tag, attrs) {
-        const el = document.createElementNS('http://www.w3.org/2000/svg', tag);
-        for (const [k, v] of Object.entries(attrs)) el.setAttribute(k, v);
-        return el;
-    }
-    function getMousePos(e) {
-        const rect = svg.getBoundingClientRect();
-        return { x: (e.clientX - rect.left) / zoom, y: (e.clientY - rect.top) / zoom };
-    }
-
-    // ── Drawing ──
-
-
-    // Pen tool point markers
-    const penPointsDiv = document.getElementById('penPoints');
-    function showPenPoints() {
-        if (pathPoints.length === 0) { hidePenPoints(); return; }
-        const svgRect = svg.getBoundingClientRect();
-        const vpRect = viewport.getBoundingClientRect();
-        const ox = svgRect.left - vpRect.left;
-        const oy = svgRect.top - vpRect.top;
-        let html = '';
-        pathPoints.forEach((p, i) => {
-            const isFirst = i === 0;
-            const closable = isFirst && pathPoints.length > 2;
-            const sz = closable ? 14 : 8;
-            const off = closable ? 7 : 4;
-            const style = `position:absolute;left:${ox + p.x * zoom - off}px;top:${oy + p.y * zoom - off}px;width:${sz}px;height:${sz}px;border-radius:${isFirst?'50%':'1px'};background:${isFirst?'#ff5252':'#0054e6'};border:${closable?'2':'1'}px solid #fff;z-index:5;${closable ? 'cursor:pointer;pointer-events:auto;box-shadow:0 0 8px rgba(255,82,82,.5);' : ''}transition:transform .15s;${closable ? 'animation:pulse-close 1s infinite;' : ''}`;
-            html += '<div style="' + style + '" ' + (isFirst ? 'title="Замкнуть контур"' : '') + '></div>';
-        });
-        penPointsDiv.style.display = 'block';
-        penPointsDiv.innerHTML = html;
-    }
-    function hidePenPoints() {
-        penPointsDiv.style.display = 'none';
-        penPointsDiv.innerHTML = '';
-    }
-
-    // Find nearest SVG element within tolerance (for thin lines etc)
-    function findNearestElement(px, py, tolerance) {
-        let best = null, bestDist = tolerance;
-        const svgR = svg.getBoundingClientRect();
-        // Search all elements in all layers
-        const allEls = [];
-        svg.querySelectorAll('g[data-layer]').forEach(layer => {
-            if (layer.getAttribute('visibility') === 'hidden') return;
-            Array.from(layer.children).forEach(el => allEls.push(el));
-        });
-        allEls.forEach(el => {
-            if (el.getAttribute('visibility') === 'hidden') return;
-            let dist = Infinity;
-            try {
-                // Use visual bounds (accounts for transforms)
-                const elR = el.getBoundingClientRect();
-                if (elR.width === 0 && elR.height === 0) return;
-                // Convert element visual bounds to SVG coords
-                const vx = (elR.left - svgR.left) / zoom;
-                const vy = (elR.top - svgR.top) / zoom;
-                const vw = elR.width / zoom;
-                const vh = elR.height / zoom;
-                if (px >= vx && px <= vx + vw && py >= vy && py <= vy + vh) {
-                    dist = 0;
-                } else {
-                    const cx = Math.max(vx, Math.min(px, vx + vw));
-                    const cy = Math.max(vy, Math.min(py, vy + vh));
-                    dist = Math.hypot(px - cx, py - cy);
-                }
-            } catch(ex) { return; }
-            if (dist < bestDist) { bestDist = dist; best = el; }
-        });
-        return best;
-    }
-    function pointToSegDist(px, py, x1, y1, x2, y2) {
-        const dx = x2 - x1, dy = y2 - y1;
-        const lenSq = dx * dx + dy * dy;
-        if (lenSq === 0) return Math.hypot(px - x1, py - y1);
-        let t = ((px - x1) * dx + (py - y1) * dy) / lenSq;
-        t = Math.max(0, Math.min(1, t));
-        return Math.hypot(px - (x1 + t * dx), py - (y1 + t * dy));
-    }
-    function distToBBox(px, py, bb) {
-        const cx = Math.max(bb.x, Math.min(px, bb.x + bb.width));
-        const cy = Math.max(bb.y, Math.min(py, bb.y + bb.height));
-        return Math.hypot(px - cx, py - cy);
-    }
-
-    svg.addEventListener('mousedown', (e) => {
-        if (e.button !== 0 || panning) return;
-        const pos = getMousePos(e);
-        startX = pos.x; startY = pos.y;
-
-        if (currentTool === 'select') {
-            // Hide handles to avoid hitting them
-            const hVis = selHandles.style.display;
-            const lhVis = lineHandles.style.display;
-            selHandles.style.display = 'none';
-            lineHandles.style.display = 'none';
-            let target = document.elementFromPoint(e.clientX, e.clientY);
-            selHandles.style.display = hVis;
-            lineHandles.style.display = lhVis;
-
-            // Walk up to direct child of layer (stop at layer <g>)
-            if (target && target !== svg && svg.contains(target)) {
-                while (target.parentElement && target.parentElement.getAttribute &&
-                       !target.parentElement.getAttribute('data-layer') &&
-                       target.parentElement !== svg) {
-                    target = target.parentElement;
-                }
-            }
-
-            // If elementFromPoint missed but we already have a selected element,
-            // check if click is within its visual bounds → re-use it for drag
-            if ((!target || target === svg) && selectedEl) {
-                const selR = selectedEl.getBoundingClientRect();
-                if (e.clientX >= selR.left - 5 && e.clientX <= selR.right + 5 &&
-                    e.clientY >= selR.top - 5 && e.clientY <= selR.bottom + 5) {
-                    target = selectedEl;
-                }
-            }
-
-            if (target && target !== svg && svg.contains(target)) {
-                // Direct hit on element → select & start drag
-                selectElement(target);
-                drawing = true;
-                const tag = selectedEl.tagName;
-                let ox, oy;
-                if (tag === 'rect' || tag === 'text' || tag === 'image') {
-                    ox = parseFloat(selectedEl.getAttribute('x') || 0);
-                    oy = parseFloat(selectedEl.getAttribute('y') || 0);
-                } else if (tag === 'ellipse' || tag === 'circle') {
-                    ox = parseFloat(selectedEl.getAttribute('cx') || 0);
-                    oy = parseFloat(selectedEl.getAttribute('cy') || 0);
-                } else if (tag === 'line') {
-                    ox = parseFloat(selectedEl.getAttribute('x1') || 0);
-                    oy = parseFloat(selectedEl.getAttribute('y1') || 0);
-                } else {
-                    ox = 0; oy = 0;
-                    const t = selectedEl.getAttribute('transform') || '';
-                    const m = t.match(/translate\(\s*([^,)\s]+)\s*,?\s*([^)\s]*)/);
-                    if (m) { ox = parseFloat(m[1]) || 0; oy = parseFloat(m[2]) || 0; }
-                }
-                selectedEl._drag = { x: startX, y: startY, ox, oy };
-                if (selectedEl.tagName === 'line') {
-                    selectedEl._drag.ox2 = parseFloat(selectedEl.getAttribute('x2'));
-                    selectedEl._drag.oy2 = parseFloat(selectedEl.getAttribute('y2'));
-                }
-            } else {
-                // Empty space → start marquee (proximity check deferred to mouseup)
-                deselectAll();
-                drawing = true;
-                tempEl = null;
-                selectedEl = null;
-                const marquee = document.getElementById('marquee');
-                marquee._start = { x: e.clientX, y: e.clientY, sx: pos.x, sy: pos.y };
-                marquee.style.display = 'block';
-                const vpR = viewport.getBoundingClientRect();
-                marquee.style.left = (e.clientX - vpR.left) + 'px';
-                marquee.style.top = (e.clientY - vpR.top) + 'px';
-                marquee.style.width = '0px';
-                marquee.style.height = '0px';
-            }
-            return;
-        }
-        if (currentTool === 'text') {
-            const text = prompt('Введите текст:');
-            if (text) {
-                const fs = document.getElementById('optFontSize')?.value || 20;
-                const col = document.getElementById('optTextColor')?.value || fillCol;
-                const ff = document.getElementById('optFontFamily')?.value || 'Manrope, sans-serif';
-                const ls = document.getElementById('optLetterSpacing')?.value || 0;
-                const fw = document.getElementById('optFontWeight')?.value || 700;
-                const el = svgEl('text', { x: pos.x, y: pos.y, fill: col, 'font-size': fs, 'font-family': ff, 'font-weight': fw, 'letter-spacing': ls, 'data-name': 'Текст' });
-                el.textContent = text;
-                getActiveLayer().appendChild(el); pushHistory(); selectElement(el);
-            }
-            return;
-        }
-        if (currentTool === 'path') {
-            // Check if clicking near first point to close path
-            if (pathPoints.length > 2) {
-                const fp = pathPoints[0];
-                const dist = Math.hypot(pos.x - fp.x, pos.y - fp.y);
-                if (dist < 20) {
-                    // Close the path
-                    let d = `M${pathPoints[0].x},${pathPoints[0].y}`;
-                    for (let i = 1; i < pathPoints.length; i++) d += ` L${pathPoints[i].x},${pathPoints[i].y}`;
-                    d += ' Z';
-                    tempEl.setAttribute('d', d);
-                    tempEl.setAttribute('fill', noFill ? 'none' : fillCol);
-                    tempEl.setAttribute('fill-opacity', fillOpacity);
-                    pushHistory();
-                    const drawnPath = tempEl; tempEl = null; pathPoints = [];
-                    hidePenPoints();
-                    currentTool = 'select';
-                    document.querySelectorAll('#toolsGroup .tb').forEach(b => b.classList.remove('active'));
-                    document.querySelector('[data-tool="select"]').classList.add('active');
-                    svg.style.cursor = 'default';
-                    updateToolOptions();
-                    selectElement(drawnPath);
-                    return;
-                }
-            }
-
-            pathPoints.push(pos);
-            if (pathPoints.length === 1) {
-                tempEl = svgEl('path', { d: `M${pos.x},${pos.y}`, fill: 'none', stroke: noStroke ? '#333' : strokeCol, 'stroke-width': strokeW, 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'data-name': 'Путь' });
-                getActiveLayer().appendChild(tempEl);
-            } else {
-                let d = `M${pathPoints[0].x},${pathPoints[0].y}`;
-                for (let i = 1; i < pathPoints.length; i++) d += ` L${pathPoints[i].x},${pathPoints[i].y}`;
-                tempEl.setAttribute('d', d);
-            }
-            showPenPoints();
-            return;
-        }
-        drawing = true;
-        const f = (currentTool === 'line' || noFill) ? 'none' : fillCol;
-        const fOpacity = (currentTool === 'line') ? '1' : '0.15';
-        if (currentTool === 'rect') {
-            tempEl = svgEl('rect', { x: pos.x, y: pos.y, width: 0, height: 0, fill: f, 'fill-opacity': fOpacity, stroke: strokeCol, 'stroke-width': strokeW, rx: '0', 'data-name': 'Прямоугольник' });
-        } else if (currentTool === 'circle') {
-            tempEl = svgEl('ellipse', { cx: pos.x, cy: pos.y, rx: 0, ry: 0, fill: f, 'fill-opacity': fOpacity, stroke: strokeCol, 'stroke-width': strokeW, 'data-name': 'Эллипс' });
-        } else if (currentTool === 'line') {
-            tempEl = svgEl('line', { x1: pos.x, y1: pos.y, x2: pos.x, y2: pos.y, stroke: strokeCol, 'stroke-width': strokeW, 'stroke-linecap': 'round', 'data-name': 'Линия' });
-        }
-        if (tempEl) getActiveLayer().appendChild(tempEl);
-    });
-
-    document.addEventListener('mousemove', (e) => {
-        if (panning) return;
-        // Handle select+drag separately (tempEl is null during drag)
-        // Marquee selection drag
-        const marquee = document.getElementById('marquee');
-        if (drawing && currentTool === 'select' && !selectedEl && marquee._start) {
-            const ms = marquee._start;
-            const vpRect = viewport.getBoundingClientRect();
-            const cx = e.clientX, cy = e.clientY;
-            const left = Math.min(ms.x, cx) - vpRect.left;
-            const top = Math.min(ms.y, cy) - vpRect.top;
-            const w = Math.abs(cx - ms.x);
-            const h = Math.abs(cy - ms.y);
-            marquee.style.left = left + 'px';
-            marquee.style.top = top + 'px';
-            marquee.style.width = w + 'px';
-            marquee.style.height = h + 'px';
-            return;
-        }
-        if (drawing && currentTool === 'select' && selectedEl?._drag) {
-            const pos = getMousePos(e);
-            const d = selectedEl._drag, ddx = pos.x - d.x, ddy = pos.y - d.y, tag = selectedEl.tagName;
-            if (tag === 'rect' || tag === 'text' || tag === 'image') { selectedEl.setAttribute('x', d.ox + ddx); selectedEl.setAttribute('y', d.oy + ddy); }
-            else if (tag === 'ellipse' || tag === 'circle') { selectedEl.setAttribute('cx', d.ox + ddx); selectedEl.setAttribute('cy', d.oy + ddy); }
-            else if (tag === 'line') { selectedEl.setAttribute('x1', d.ox + ddx); selectedEl.setAttribute('y1', d.oy + ddy); selectedEl.setAttribute('x2', d.ox2 + ddx); selectedEl.setAttribute('y2', d.oy2 + ddy); }
-            else {
-                const origT = selectedEl.getAttribute('transform') || '';
-                const rest = origT.replace(/translate\([^)]*\)/, '').trim();
-                selectedEl.setAttribute('transform', `translate(${d.ox + ddx},${d.oy + ddy}) ${rest}`.trim());
-            }
-            showHandles();
-            return;
-        }
-        if (!drawing || !tempEl) return;
-        const pos = getMousePos(e);
-        const dx = pos.x - startX, dy = pos.y - startY;
-        const shift = e.shiftKey;
-        if (false && currentTool === 'select' && selectedEl?._drag) {
-            const d = selectedEl._drag, ddx = pos.x - d.x, ddy = pos.y - d.y, tag = selectedEl.tagName;
-            if (tag === 'rect' || tag === 'text' || tag === 'image') { selectedEl.setAttribute('x', d.ox + ddx); selectedEl.setAttribute('y', d.oy + ddy); }
-            else if (tag === 'ellipse' || tag === 'circle') { selectedEl.setAttribute('cx', d.ox + ddx); selectedEl.setAttribute('cy', d.oy + ddy); }
-            else if (tag === 'line') { selectedEl.setAttribute('x1', d.ox + ddx); selectedEl.setAttribute('y1', d.oy + ddy); selectedEl.setAttribute('x2', d.ox2 + ddx); selectedEl.setAttribute('y2', d.oy2 + ddy); }
-            else {
-                const origT = selectedEl.getAttribute('transform') || '';
-                const rest = origT.replace(/translate\([^)]*\)/, '').trim();
-                selectedEl.setAttribute('transform', `translate(${d.ox + ddx},${d.oy + ddy}) ${rest}`.trim());
-            }
-            showHandles();
-            return;
-        }
-        if (currentTool === 'rect') {
-            const w = shift ? Math.max(Math.abs(dx), Math.abs(dy)) : Math.abs(dx);
-            const h = shift ? w : Math.abs(dy);
-            tempEl.setAttribute('x', dx < 0 ? startX - w : startX); tempEl.setAttribute('y', dy < 0 ? startY - h : startY);
-            tempEl.setAttribute('width', w); tempEl.setAttribute('height', h);
-        } else if (currentTool === 'circle') {
-            const rx = shift ? Math.max(Math.abs(dx), Math.abs(dy)) / 2 : Math.abs(dx) / 2;
-            const ry = shift ? rx : Math.abs(dy) / 2;
-            tempEl.setAttribute('cx', startX + dx / 2); tempEl.setAttribute('cy', startY + dy / 2);
-            tempEl.setAttribute('rx', rx); tempEl.setAttribute('ry', ry);
-        } else if (currentTool === 'line') {
-            if (shift) {
-                const angle = Math.atan2(dy, dx), snap = Math.round(angle / (Math.PI / 4)) * (Math.PI / 4), len = Math.sqrt(dx * dx + dy * dy);
-                tempEl.setAttribute('x2', startX + Math.cos(snap) * len); tempEl.setAttribute('y2', startY + Math.sin(snap) * len);
-            } else { tempEl.setAttribute('x2', pos.x); tempEl.setAttribute('y2', pos.y); }
-        }
-    });
-
-    document.addEventListener('mouseup', () => {
-        if (!drawing) return;
-        drawing = false;
-        // Marquee selection end
-        const mq = document.getElementById('marquee');
-        if (currentTool === 'select' && !selectedEl && mq._start) {
-            const ms = mq._start;
-            const pos2 = getMousePos({ clientX: mq._start.x, clientY: mq._start.y });
-            // Compute marquee rect in SVG coords
-            const mx1 = Math.min(ms.sx, getMousePos({ clientX: parseInt(mq.style.left) + viewport.getBoundingClientRect().left, clientY: 0 }).x);
-            const svgR = svg.getBoundingClientRect();
-            const vpR = viewport.getBoundingClientRect();
-            const mqLeft = parseFloat(mq.style.left);
-            const mqTop = parseFloat(mq.style.top);
-            const mqW = parseFloat(mq.style.width);
-            const mqH = parseFloat(mq.style.height);
-            // Convert marquee screen rect to SVG coords
-            const sx1 = (mqLeft + vpR.left - svgR.left) / zoom;
-            const sy1 = (mqTop + vpR.top - svgR.top) / zoom;
-            const sx2 = sx1 + mqW / zoom;
-            const sy2 = sy1 + mqH / zoom;
-
-            mq.style.display = 'none';
-            delete mq._start;
-
-            if (mqW > 5 || mqH > 5) {
-                // Find topmost element within marquee using visual bounds
-                let best = null;
-                Array.from(svg.children).forEach(el => {
-                    if (el.getAttribute('visibility') === 'hidden') return;
-                    try {
-                        const elR = el.getBoundingClientRect();
-                        const vpR2 = viewport.getBoundingClientRect();
-                        const elL = elR.left - vpR2.left;
-                        const elT = elR.top - vpR2.top;
-                        const elR2 = elL + elR.width;
-                        const elB = elT + elR.height;
-                        // Marquee bounds in viewport coords
-                        if (elL < mqLeft + mqW && elR2 > mqLeft && elT < mqTop + mqH && elB > mqTop) {
-                            best = el; // last = topmost
-                        }
-                    } catch(e) {}
-                });
-                if (best) selectElement(best);
-            } else {
-                // Tiny marquee = click on empty space, try proximity for thin elements
-                const nearPos = getMousePos({ clientX: ms.x, clientY: ms.y });
-                const near = findNearestElement(nearPos.x, nearPos.y, 12);
-                if (near) selectElement(near);
-            }
-            return;
-        }
-        if (currentTool === 'select' && selectedEl) { delete selectedEl._drag; pushHistory(); updateProps(); showHandles(); return; }
-        if (tempEl && currentTool !== 'select') {
-            const w = parseFloat(tempEl.getAttribute('width') || tempEl.getAttribute('rx') || 0);
-            const h = parseFloat(tempEl.getAttribute('height') || tempEl.getAttribute('ry') || 0);
-            if (currentTool === 'line') {
-                const x1 = parseFloat(tempEl.getAttribute('x1')), y1 = parseFloat(tempEl.getAttribute('y1'));
-                const x2 = parseFloat(tempEl.getAttribute('x2')), y2 = parseFloat(tempEl.getAttribute('y2'));
-                if (Math.abs(x2 - x1) < 2 && Math.abs(y2 - y1) < 2) { tempEl.remove(); tempEl = null; return; }
-            } else if (w < 2 && h < 2) { tempEl.remove(); tempEl = null; return; }
-            tempEl.setAttribute('fill-opacity', noFill ? '0' : String(fillOpacity));
-            if (noStroke) tempEl.setAttribute('stroke', 'none');
-            pushHistory();
-            // Auto-switch to select and select the drawn element
-            const drawnEl = tempEl; tempEl = null;
-            currentTool = 'select';
-            document.querySelectorAll('#toolsGroup .tb').forEach(b => b.classList.remove('active'));
-            document.querySelector('[data-tool="select"]').classList.add('active');
-            svg.style.cursor = 'default';
-            updateToolOptions();
-            selectElement(drawnEl);
-        }
-    });
-
-    svg.addEventListener('dblclick', (e) => {
-        // Inline text edit on double-click
-        if (currentTool === 'select' && selectedEl && selectedEl.tagName === 'text') {
-            startTextEdit(selectedEl);
-            return;
-        }
-        if (currentTool === 'path' && pathPoints.length > 1) {
-            // Double-click finishes path (open, no close)
-            tempEl.setAttribute('fill', noFill ? 'none' : fillCol);
-            tempEl.setAttribute('fill-opacity', noFill ? '0' : String(fillOpacity));
-            pushHistory();
-            const drawnPath = tempEl; tempEl = null; pathPoints = [];
-            hidePenPoints();
-            currentTool = 'select';
-            document.querySelectorAll('#toolsGroup .tb').forEach(b => b.classList.remove('active'));
-            document.querySelector('[data-tool="select"]').classList.add('active');
-            svg.style.cursor = 'default';
-            updateToolOptions();
-            selectElement(drawnPath);
-        }
-    });
-
-    // ── Selection ──
-    const selHandles = document.getElementById('selHandles');
-    let resizing = false, resizeHandle = '', resizeStart = {};
-
-    function selectElement(el) {
-        deselectAll();
-        selectedEl = el;
-        // Defer showHandles to next frame so layout recalculates after toolOptions change
-        updateProps(); updateLayers(); updateToolOptions();
-        document.getElementById('propsPanel').classList.add('visible');
-        document.getElementById('layerPanel').classList.remove('visible');
-        requestAnimationFrame(() => showHandles());
-    }
-    function deselectAll() {
-        selectedEl = null;
-        selHandles.style.display = 'none';
-        lineHandles.style.display = 'none';
-        document.getElementById('propsPanel').classList.remove('visible');
-        const mqEl = document.getElementById('marquee');
-        if (mqEl) { mqEl.style.display = 'none'; delete mqEl._start; }
-        updateProps(); updateLayers();
-    }
-    // Line endpoint handles
-    const lineHandles = document.createElement('div');
-    lineHandles.id = 'lineHandles';
-    lineHandles.style.cssText = 'display:none;position:absolute;pointer-events:none;z-index:5';
-    lineHandles.innerHTML = '<div class="sh" data-lh="1" style="pointer-events:auto;cursor:move"></div><div class="sh" data-lh="2" style="pointer-events:auto;cursor:move"></div>';
-    viewport.appendChild(lineHandles);
-
-    // Line endpoint drag
-    lineHandles.querySelectorAll('.sh').forEach(h => {
-        h.addEventListener('mousedown', (e) => {
-            e.stopPropagation();
-            if (!selectedEl || selectedEl.tagName !== 'line') return;
-            resizing = true;
-            resizeHandle = h.dataset.lh;
-            resizeStart = { x: e.clientX, y: e.clientY,
-                x1: parseFloat(selectedEl.getAttribute('x1')), y1: parseFloat(selectedEl.getAttribute('y1')),
-                x2: parseFloat(selectedEl.getAttribute('x2')), y2: parseFloat(selectedEl.getAttribute('y2'))
-            };
-            document.addEventListener('mousemove', onLineHandleDrag);
-            document.addEventListener('mouseup', onLineHandleDragEnd);
-        });
-    });
-    function onLineHandleDrag(e) {
-        if (!resizing || !selectedEl) return;
-        const dx = (e.clientX - resizeStart.x) / zoom;
-        const dy = (e.clientY - resizeStart.y) / zoom;
-        if (resizeHandle === '1') {
-            selectedEl.setAttribute('x1', resizeStart.x1 + dx);
-            selectedEl.setAttribute('y1', resizeStart.y1 + dy);
-        } else {
-            selectedEl.setAttribute('x2', resizeStart.x2 + dx);
-            selectedEl.setAttribute('y2', resizeStart.y2 + dy);
-        }
-        showHandles();
-    }
-    function onLineHandleDragEnd() {
-        resizing = false;
-        document.removeEventListener('mousemove', onLineHandleDrag);
-        document.removeEventListener('mouseup', onLineHandleDragEnd);
-        pushHistory(); updateProps();
-    }
-
-    function getVisualBBox(el) {
-        // Compute visual bbox using CTM (avoids layout timing issues)
-        const bb = el.getBBox();
-        const ctm = el.getCTM();
-        if (!ctm) {
-            const svgRect = svg.getBoundingClientRect();
-            const vpRect = viewport.getBoundingClientRect();
-            return { left: svgRect.left - vpRect.left + bb.x * zoom, top: svgRect.top - vpRect.top + bb.y * zoom, width: bb.width * zoom, height: bb.height * zoom };
-        }
-        // Transform all 4 corners of bbox through CTM
-        const pts = [
-            { x: bb.x, y: bb.y },
-            { x: bb.x + bb.width, y: bb.y },
-            { x: bb.x + bb.width, y: bb.y + bb.height },
-            { x: bb.x, y: bb.y + bb.height }
-        ];
-        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-        const svgCtm = svg.getScreenCTM();
-        const vpRect = viewport.getBoundingClientRect();
-        pts.forEach(p => {
-            const pt = svg.createSVGPoint();
-            pt.x = p.x; pt.y = p.y;
-            // Transform through element CTM to screen, then to viewport-relative
-            const screen = pt.matrixTransform(el.getScreenCTM());
-            const vx = screen.x - vpRect.left;
-            const vy = screen.y - vpRect.top;
-            minX = Math.min(minX, vx); minY = Math.min(minY, vy);
-            maxX = Math.max(maxX, vx); maxY = Math.max(maxY, vy);
-        });
-        return { left: minX, top: minY, width: maxX - minX, height: maxY - minY };
-    }
-
-    function showHandles() {
-        if (!selectedEl) { selHandles.style.display = 'none'; lineHandles.style.display = 'none'; return; }
-        const vpRect = viewport.getBoundingClientRect();
-        const svgRect = svg.getBoundingClientRect();
-        const ox = svgRect.left - vpRect.left;
-        const oy = svgRect.top - vpRect.top;
-
-        if (selectedEl.tagName === 'line') {
-            selHandles.style.display = 'none';
-            lineHandles.style.display = 'block';
-            // For lines, account for any transform
-            const ctm = selectedEl.getCTM();
-            const svgCtm = svg.getScreenCTM();
-            let x1 = parseFloat(selectedEl.getAttribute('x1'));
-            let y1 = parseFloat(selectedEl.getAttribute('y1'));
-            let x2 = parseFloat(selectedEl.getAttribute('x2'));
-            let y2 = parseFloat(selectedEl.getAttribute('y2'));
-            if (ctm && svgCtm) {
-                const inv = svgCtm.inverse();
-                // Transform through element CTM then to screen, then to viewport
-                const pt1 = svg.createSVGPoint(); pt1.x = x1; pt1.y = y1;
-                const pt2 = svg.createSVGPoint(); pt2.x = x2; pt2.y = y2;
-                const s1 = pt1.matrixTransform(ctm).matrixTransform(inv);
-                const s2 = pt2.matrixTransform(ctm).matrixTransform(inv);
-                x1 = s1.x; y1 = s1.y; x2 = s2.x; y2 = s2.y;
-            }
-            lineHandles.children[0].style.left = (ox + x1 * zoom - 4) + 'px';
-            lineHandles.children[0].style.top = (oy + y1 * zoom - 4) + 'px';
-            lineHandles.children[1].style.left = (ox + x2 * zoom - 4) + 'px';
-            lineHandles.children[1].style.top = (oy + y2 * zoom - 4) + 'px';
-            return;
-        }
-
-        lineHandles.style.display = 'none';
-
-        // Use visual bounding rect (includes transforms)
-        const vbb = getVisualBBox(selectedEl);
-        selHandles.style.display = 'block';
-        selHandles.style.left = vbb.left + 'px';
-        selHandles.style.top = vbb.top + 'px';
-        selHandles.style.width = vbb.width + 'px';
-        selHandles.style.height = vbb.height + 'px';
-    }
-
-    // Resize handles
-    selHandles.querySelectorAll('.sh').forEach(h => {
-        h.addEventListener('mousedown', (e) => {
-            e.stopPropagation();
-            if (!selectedEl) return;
-            resizing = true;
-            resizeHandle = h.dataset.h;
-            const tag = selectedEl.tagName;
-            if (tag === 'g' || tag === 'path' || tag === 'text') {
-                // Use visual bounds for transformed elements
-                const vbb = getVisualBBox(selectedEl);
-                const bb = selectedEl.getBBox();
-                resizeStart = {
-                    x: e.clientX, y: e.clientY,
-                    bx: bb.x, by: bb.y, bw: bb.width, bh: bb.height,
-                    vx: vbb.left, vy: vbb.top, vw: vbb.width, vh: vbb.height,
-                    origTransform: selectedEl.getAttribute('transform') || '',
-                    useVisual: true
-                };
-            } else {
-                const bb = selectedEl.getBBox();
-                resizeStart = { x: e.clientX, y: e.clientY, bx: bb.x, by: bb.y, bw: bb.width, bh: bb.height };
-            }
-            document.addEventListener('mousemove', onResize);
-            document.addEventListener('mouseup', onResizeEnd);
-        });
-    });
-    function onResize(e) {
-        if (!resizing || !selectedEl) return;
-        const dx = (e.clientX - resizeStart.x) / zoom;
-        const dy = (e.clientY - resizeStart.y) / zoom;
-        const s = resizeStart;
-        let nx = s.bx, ny = s.by, nw = s.bw, nh = s.bh;
-        const tag = selectedEl.tagName;
-
-        if (resizeHandle.includes('e')) nw = Math.max(2, s.bw + dx);
-        if (resizeHandle.includes('w')) { nx = s.bx + dx; nw = Math.max(2, s.bw - dx); }
-        if (resizeHandle.includes('s')) nh = Math.max(2, s.bh + dy);
-        if (resizeHandle.includes('n')) { ny = s.by + dy; nh = Math.max(2, s.bh - dy); }
-
-        // Shift = proportional
-        if (e.shiftKey && s.bw > 0 && s.bh > 0) {
-            const ratio = s.bw / s.bh;
-            if (resizeHandle === 'n' || resizeHandle === 's') { nw = nh * ratio; }
-            else if (resizeHandle === 'e' || resizeHandle === 'w') { nh = nw / ratio; }
-            else { const maxD = Math.max(Math.abs(nw - s.bw), Math.abs(nh - s.bh)); nw = s.bw + maxD * Math.sign(nw - s.bw || 1); nh = nw / ratio; }
-        }
-
-        if (tag === 'rect') {
-            selectedEl.setAttribute('x', nx); selectedEl.setAttribute('y', ny);
-            selectedEl.setAttribute('width', nw); selectedEl.setAttribute('height', nh);
-        } else if (tag === 'ellipse') {
-            selectedEl.setAttribute('cx', nx + nw / 2); selectedEl.setAttribute('cy', ny + nh / 2);
-            selectedEl.setAttribute('rx', nw / 2); selectedEl.setAttribute('ry', nh / 2);
-        } else if (tag === 'line') {
-            if (resizeHandle.includes('e') || resizeHandle.includes('s')) {
-                selectedEl.setAttribute('x2', parseFloat(selectedEl.getAttribute('x2')) + dx);
-                selectedEl.setAttribute('y2', parseFloat(selectedEl.getAttribute('y2')) + dy);
-            } else {
-                selectedEl.setAttribute('x1', parseFloat(selectedEl.getAttribute('x1')) + dx);
-                selectedEl.setAttribute('y1', parseFloat(selectedEl.getAttribute('y1')) + dy);
-            }
-        } else if (tag === 'text' || tag === 'g' || tag === 'path') {
-            if (!s.useVisual) return;
-            // Compute new visual size from handle drag (in screen pixels)
-            const dxPx = e.clientX - s.x;
-            const dyPx = e.clientY - s.y;
-            let newVW = s.vw, newVH = s.vh, newVX = s.vx, newVY = s.vy;
-
-            if (resizeHandle.includes('e')) newVW = Math.max(8, s.vw + dxPx);
-            if (resizeHandle.includes('w')) { newVX = s.vx + dxPx; newVW = Math.max(8, s.vw - dxPx); }
-            if (resizeHandle.includes('s')) newVH = Math.max(8, s.vh + dyPx);
-            if (resizeHandle.includes('n')) { newVY = s.vy + dyPx; newVH = Math.max(8, s.vh - dyPx); }
-
-            // Shift = proportional
-            if (e.shiftKey && s.vw > 0 && s.vh > 0) {
-                const ratio = s.vw / s.vh;
-                if (resizeHandle === 'n' || resizeHandle === 's') { newVW = newVH * ratio; }
-                else if (resizeHandle === 'e' || resizeHandle === 'w') { newVH = newVW / ratio; }
-                else { newVH = newVW / ratio; }
-            }
-
-            const scaleX = newVW / s.vw;
-            const scaleY = newVH / s.vh;
-
-            // Parse original transform to get existing translate and scale
-            const origT = s.origTransform;
-            const tm = origT.match(/translate\(\s*([^,)\s]+)\s*,?\s*([^)\s]*)\s*\)/);
-            const sm = origT.match(/scale\(\s*([^,)\s]+)\s*,?\s*([^)\s]*)\s*\)/);
-            const origTX = tm ? parseFloat(tm[1]) || 0 : 0;
-            const origTY = tm ? parseFloat(tm[2]) || 0 : 0;
-            const origSX = sm ? parseFloat(sm[1]) || 1 : 1;
-            const origSY = sm ? (parseFloat(sm[2]) || origSX) : origSX;
-
-            // New scale = original scale * ratio
-            const newSX = origSX * scaleX;
-            const newSY = origSY * scaleY;
-
-            // Adjust translate so the pinned corner stays in place
-            // The pinned corner is opposite to the drag handle
-            // For simplicity: compute offset needed
-            const vpR = document.getElementById('viewport').getBoundingClientRect();
-            const svgR = svg.getBoundingClientRect();
-            const pinnedVX = resizeHandle.includes('e') || resizeHandle.includes('s') ? s.vx : s.vx + s.vw;
-            const pinnedVY = resizeHandle.includes('e') || resizeHandle.includes('s') ? s.vy : s.vy + s.vh;
-            if (resizeHandle === 'n' || resizeHandle === 'w' || resizeHandle === 'nw') {
-                // Pin bottom-right
-            }
-
-            // Convert pinned visual point to SVG coords
-            const pinnedSvgX = (pinnedVX + vpR.left - svgR.left) / zoom;
-            const pinnedSvgY = (pinnedVY + vpR.top - svgR.top) / zoom;
-
-            // New translate: pin point - (local pin point * new scale)
-            // local pin point relative to bbox origin
-            let localPinX, localPinY;
-            if (resizeHandle.includes('w')) { localPinX = s.bx + s.bw; } else { localPinX = s.bx; }
-            if (resizeHandle.includes('n')) { localPinY = s.by + s.bh; } else { localPinY = s.by; }
-
-            const newTX = pinnedSvgX - localPinX * newSX;
-            const newTY = pinnedSvgY - localPinY * newSY;
-
-            selectedEl.setAttribute('transform', `translate(${newTX.toFixed(1)},${newTY.toFixed(1)}) scale(${newSX.toFixed(3)},${newSY.toFixed(3)})`);
-            showHandles();
-            return; // skip normal nx/ny logic
-        }
-        showHandles();
-    }
-    function onResizeEnd() {
-        if (resizing) {
-            resizing = false;
-            // For text: bake transform into font-size for cleaner SVG
-            if (selectedEl && selectedEl.tagName === 'text') {
-                const t = selectedEl.getAttribute('transform');
-                if (t) {
-                    const bb = selectedEl.getBBox();
-                    const m = svg.createSVGMatrix();
-                    // Extract scale from transform via getBBox comparison
-                    const ctm = selectedEl.getCTM();
-                    const parentCtm = svg.getCTM();
-                    if (ctm && parentCtm) {
-                        const relScale = ctm.a / parentCtm.a;
-                        const origFS = parseFloat(selectedEl.getAttribute('font-size') || 20);
-                        const newFS = Math.round(origFS * relScale * 10) / 10;
-                        // Get the transformed position
-                        const pt = svg.createSVGPoint();
-                        pt.x = parseFloat(selectedEl.getAttribute('x') || 0);
-                        pt.y = parseFloat(selectedEl.getAttribute('y') || 0);
-                        const tPt = pt.matrixTransform(ctm).matrixTransform(parentCtm.inverse());
-                        selectedEl.setAttribute('font-size', Math.max(6, newFS));
-                        selectedEl.setAttribute('x', Math.round(tPt.x * 10) / 10);
-                        selectedEl.setAttribute('y', Math.round(tPt.y * 10) / 10);
-                        selectedEl.removeAttribute('transform');
-                    }
-                }
-            }
-            pushHistory(); updateProps();
-        }
-        document.removeEventListener('mousemove', onResize);
-        document.removeEventListener('mouseup', onResizeEnd);
-    }
-
-    // ── Properties Panel ──
-    document.getElementById('btnProps').addEventListener('click', () => {
-        const p = document.getElementById('propsPanel');
-        p.classList.toggle('visible');
-        document.getElementById('layerPanel').classList.remove('visible');
-    });
-    document.getElementById('propsClose').addEventListener('click', () => document.getElementById('propsPanel').classList.remove('visible'));
-
-    function updateProps() {
-        const body = document.getElementById('propsBody');
-        if (!selectedEl) { body.innerHTML = '<div class="pp-section"><span style="font-size:11px;color:var(--text-muted);font-family:\'JetBrains Mono\',monospace">Выберите элемент</span></div>'; return; }
-        const tag = selectedEl.tagName;
-        let html = '<div class="pp-section"><div class="pp-section-title">Позиция</div>';
-        if (tag === 'rect' || tag === 'text') {
-            html += ppRow('X', 'ppX', selectedEl.getAttribute('x') || 0) + ppRow('Y', 'ppY', selectedEl.getAttribute('y') || 0);
-        } else if (tag === 'ellipse') {
-            html += ppRow('CX', 'ppX', selectedEl.getAttribute('cx') || 0) + ppRow('CY', 'ppY', selectedEl.getAttribute('cy') || 0);
-        } else if (tag === 'line') {
-            html += ppRow('X1', 'ppX', selectedEl.getAttribute('x1') || 0) + ppRow('Y1', 'ppY', selectedEl.getAttribute('y1') || 0);
-        }
-        html += '</div>';
-        if (tag === 'rect') { html += '<div class="pp-section"><div class="pp-section-title">Размер</div>' + ppRow('W', 'ppW', selectedEl.getAttribute('width') || 0) + ppRow('H', 'ppH', selectedEl.getAttribute('height') || 0) + '</div>'; }
-        else if (tag === 'ellipse') { html += '<div class="pp-section"><div class="pp-section-title">Размер</div>' + ppRow('RX', 'ppW', selectedEl.getAttribute('rx') || 0) + ppRow('RY', 'ppH', selectedEl.getAttribute('ry') || 0) + '</div>'; }
-        const fill = selectedEl.getAttribute('fill') || 'none';
-        const stroke = selectedEl.getAttribute('stroke') || 'none';
-        html += `<div class="pp-section"><div class="pp-section-title">Стиль</div>
-            <div class="pp-row"><span class="pp-label">Fill</span><input type="color" class="pp-color" id="ppFill" value="${fill === 'none' ? '#000000' : fill}"></div>
-            <div class="pp-row"><span class="pp-label">Str</span><input type="color" class="pp-color" id="ppStroke" value="${stroke === 'none' ? '#000000' : stroke}"></div>
-            ${ppRow('SW', 'ppSW', selectedEl.getAttribute('stroke-width') || 1)}
-            ${ppRow('Op', 'ppOp', selectedEl.getAttribute('opacity') || 1)}
-            </div>`;
-        if (tag === 'text') {
-            html += '<div class="pp-section"><div class="pp-section-title">Текст</div>';
-            html += ppRow('Sz', 'ppFS', selectedEl.getAttribute('font-size') || 16);
-            html += ppRow('LS', 'ppLS', selectedEl.getAttribute('letter-spacing') || 0);
-            html += ppRow('FW', 'ppFW', selectedEl.getAttribute('font-weight') || 400);
-            html += '</div>';
-        }
-        body.innerHTML = html;
-        body.querySelectorAll('.pp-input,.pp-color').forEach(input => input.addEventListener('change', () => applyProp(input)));
-    }
-    function ppRow(label, id, val) {
-        return `<div class="pp-row"><span class="pp-label">${label}</span><input class="pp-input" id="${id}" type="number" step="any" value="${parseFloat(val) || 0}"></div>`;
-    }
-    function applyProp(input) {
-        if (!selectedEl) return;
-        const id = input.id, val = input.value, tag = selectedEl.tagName;
-        if (id === 'ppX') selectedEl.setAttribute(tag === 'ellipse' ? 'cx' : tag === 'line' ? 'x1' : 'x', val);
-        else if (id === 'ppY') selectedEl.setAttribute(tag === 'ellipse' ? 'cy' : tag === 'line' ? 'y1' : 'y', val);
-        else if (id === 'ppW') selectedEl.setAttribute(tag === 'ellipse' ? 'rx' : 'width', val);
-        else if (id === 'ppH') selectedEl.setAttribute(tag === 'ellipse' ? 'ry' : 'height', val);
-        else if (id === 'ppFill') selectedEl.setAttribute('fill', val);
-        else if (id === 'ppStroke') selectedEl.setAttribute('stroke', val);
-        else if (id === 'ppSW') selectedEl.setAttribute('stroke-width', val);
-        else if (id === 'ppOp') selectedEl.setAttribute('opacity', val);
-        else if (id === 'ppFS') { selectedEl.setAttribute('font-size', val); showHandles(); }
-        else if (id === 'ppLS') { selectedEl.setAttribute('letter-spacing', val); showHandles(); }
-        else if (id === 'ppFW') { selectedEl.setAttribute('font-weight', val); showHandles(); }
-        pushHistory();
-    }
-
-    // ── Layers Panel ──
-    document.getElementById('btnLayers').addEventListener('click', () => {
-        const p = document.getElementById('layerPanel');
-        p.classList.toggle('visible');
-        document.getElementById('propsPanel').classList.remove('visible');
-    });
-    document.getElementById('lpClear').addEventListener('click', () => {
-        if (confirm('Очистить холст?')) {
-            svg.innerHTML = '';
-            activeLayer = null;
-            initLayers();
-            deselectAll();
-            pushHistory();
-        }
-    });
-    document.getElementById('lpAddLayer').addEventListener('click', () => {
-        addLayer();
-        document.getElementById('stStatus').textContent = 'Новый слой создан';
-    });
-
-    function updateLayers() {
-        const list = document.getElementById('layerList');
-        const layers = svg.querySelectorAll(':scope > g[data-layer]');
-        let html = '';
-
-        for (let li = layers.length - 1; li >= 0; li--) {
-            const layer = layers[li];
-            const layerName = layer.getAttribute('data-name') || 'Слой';
-            const isActive = layer === activeLayer;
-            const layerVis = layer.getAttribute('visibility') !== 'hidden';
-
-            html += '<div class="lp-layer ' + (isActive ? 'active' : '') + '" data-layer-idx="' + li + '">';
-            html += '<span class="lp-name">' + layerName + '</span>';
-            var layerLocked = layer.getAttribute('data-locked') === '1';
-            html += '<span class="lp-lock ' + (layerLocked ? 'locked' : '') + '" data-layer-lock="' + li + '" title="' + (layerLocked ? 'Разблокировать' : 'Заблокировать') + '">' + (layerLocked ? '🔒' : '🔓') + '</span>';
-            html += '<button class="lp-btn" data-layer-up="' + li + '" title="Выше" style="font-size:10px">↑</button>';
-            html += '<button class="lp-btn" data-layer-down="' + li + '" title="Ниже" style="font-size:10px">↓</button>';
-            html += '<button class="lp-btn" data-layer-vis="' + li + '" title="' + (layerVis ? 'Скрыть' : 'Показать') + '"><svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">' + (layerVis ? '<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/>' : '<line x1="1" y1="1" x2="23" y2="23"/>') + '</svg></button>';
-            html += '<button class="lp-btn" data-layer-del="' + li + '" title="Удалить слой"><svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>';
-            html += '</div>';
-
-            // Children of this layer
-            const children = Array.from(layer.children);
-            for (let ci = children.length - 1; ci >= 0; ci--) {
-                const el = children[ci];
-                if (el.getAttribute('data-layer')) continue;
-                const name = el.getAttribute('data-name') || el.tagName;
-                const isSel = el === selectedEl;
-                const isGroup = el.tagName === 'g';
-                const icon = isGroup ? '📁' : '◇';
-                html += '<div class="lp-child ' + (isSel ? 'selected' : '') + '" data-layer-idx="' + li + '" data-child-idx="' + ci + '">';
-                html += '<span style="font-size:10px;flex-shrink:0">' + icon + '</span>';
-                html += '<span class="lp-name">' + name + (isGroup ? ' (' + el.children.length + ')' : '') + '</span>';
-                html += '<button class="lp-btn" data-child-del="' + li + '-' + ci + '"><svg width="10" height="10" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>';
-                html += '</div>';
-            }
-        }
-
-        list.innerHTML = html;
-
-        // Layer click → set active
-        list.querySelectorAll('.lp-layer').forEach(el => {
-            el.addEventListener('click', (e) => {
-                if (e.target.closest('.lp-btn')) return;
-                const idx = parseInt(el.dataset.layerIdx);
-                activeLayer = layers[idx];
-                updateLayers();
-            });
-        });
-
-        // Layer visibility
-        list.querySelectorAll('[data-layer-vis]').forEach(btn => {
-            btn.addEventListener('click', () => {
-                const layer = layers[parseInt(btn.dataset.layerVis)];
-                layer.setAttribute('visibility', layer.getAttribute('visibility') === 'hidden' ? 'visible' : 'hidden');
-                updateLayers();
-            });
-        });
-
-        // Layer delete
-        list.querySelectorAll('[data-layer-del]').forEach(btn => {
-            btn.addEventListener('click', () => {
-                if (layers.length <= 1) return; // keep at least one
-                const layer = layers[parseInt(btn.dataset.layerDel)];
-                layer.remove();
-                if (layer === activeLayer) activeLayer = svg.querySelector('g[data-layer]');
-                if (selectedEl && !svg.contains(selectedEl)) deselectAll();
-                pushHistory();
-            });
-        });
-
-        // Layer lock
-        list.querySelectorAll('[data-layer-lock]').forEach(btn => {
-            btn.addEventListener('click', (e) => {
-                e.stopPropagation();
-                const layer = layers[parseInt(btn.dataset.layerLock)];
-                const locked = layer.getAttribute('data-locked') === '1';
-                layer.setAttribute('data-locked', locked ? '0' : '1');
-                if (!locked) layer.style.pointerEvents = 'none';
-                else layer.style.pointerEvents = '';
-                updateLayers();
-                document.getElementById('stStatus').textContent = locked ? 'Слой разблокирован' : 'Слой заблокирован';
-            });
-        });
-
-        // Layer reorder
-        list.querySelectorAll('[data-layer-up]').forEach(btn => {
-            btn.addEventListener('click', (e) => {
-                e.stopPropagation();
-                const idx = parseInt(btn.dataset.layerUp);
-                const layer = layers[idx];
-                if (layer.nextElementSibling) {
-                    layer.parentElement.insertBefore(layer.nextElementSibling, layer);
-                    pushHistory(); updateLayers();
-                }
-            });
-        });
-        list.querySelectorAll('[data-layer-down]').forEach(btn => {
-            btn.addEventListener('click', (e) => {
-                e.stopPropagation();
-                const idx = parseInt(btn.dataset.layerDown);
-                const layer = layers[idx];
-                if (layer.previousElementSibling) {
-                    layer.parentElement.insertBefore(layer, layer.previousElementSibling);
-                    pushHistory(); updateLayers();
-                }
-            });
-        });
-
-        // Child click → select
-        list.querySelectorAll('.lp-child').forEach(el => {
-            el.addEventListener('click', (e) => {
-                if (e.target.closest('.lp-btn')) return;
-                const li2 = parseInt(el.dataset.layerIdx);
-                const ci2 = parseInt(el.dataset.childIdx);
-                const child = layers[li2].children[ci2];
-                if (child) selectElement(child);
-            });
-        });
-
-        // Child delete
-        list.querySelectorAll('[data-child-del]').forEach(btn => {
-            btn.addEventListener('click', () => {
-                const [li2, ci2] = btn.dataset.childDel.split('-').map(Number);
-                const child = layers[li2].children[ci2];
-                if (child) { if (child === selectedEl) deselectAll(); child.remove(); pushHistory(); }
-            });
-        });
-    }
-
-    // ── Toolbar Actions ──
-    document.getElementById('btnUndo').addEventListener('click', undo);
-    document.getElementById('btnRedo').addEventListener('click', redo);
-    document.getElementById('btnDelete').addEventListener('click', () => { if (selectedEl) { selectedEl.remove(); deselectAll(); pushHistory(); } });
-    document.getElementById('btnDuplicate').addEventListener('click', () => {
-        if (!selectedEl) return;
-        const clone = selectedEl.cloneNode(true);
-        const tag = clone.tagName;
-        if (tag === 'rect' || tag === 'text') { clone.setAttribute('x', parseFloat(clone.getAttribute('x') || 0) + 20); clone.setAttribute('y', parseFloat(clone.getAttribute('y') || 0) + 20); }
-        else if (tag === 'ellipse') { clone.setAttribute('cx', parseFloat(clone.getAttribute('cx') || 0) + 20); clone.setAttribute('cy', parseFloat(clone.getAttribute('cy') || 0) + 20); }
-        else if (tag === 'line') { ['x1','y1','x2','y2'].forEach(a => clone.setAttribute(a, parseFloat(clone.getAttribute(a) || 0) + 20)); }
-        getActiveLayer().appendChild(clone); pushHistory(); selectElement(clone);
-    });
-    document.getElementById('btnFront').addEventListener('click', () => { if (selectedEl) { svg.appendChild(selectedEl); pushHistory(); updateLayers(); } });
-    document.getElementById('btnBack').addEventListener('click', () => { if (selectedEl && svg.firstChild !== selectedEl) { svg.insertBefore(selectedEl, svg.firstChild); pushHistory(); updateLayers(); } });
-
-    // Color swatches
-    document.getElementById('fillColor').addEventListener('input', (e) => { fillCol = e.target.value; if (selectedEl) { selectedEl.setAttribute('fill', fillCol); pushHistory(); } });
-    document.getElementById('strokeColor').addEventListener('input', (e) => { strokeCol = e.target.value; if (selectedEl) { selectedEl.setAttribute('stroke', strokeCol); pushHistory(); } });
-
-    // Import
-    document.getElementById('btnImport').addEventListener('click', () => document.getElementById('importFile').click());
-    document.getElementById('importFile').addEventListener('change', (e) => {
-        const file = e.target.files[0]; if (!file) return;
-        const reader = new FileReader();
-        reader.onload = () => {
-            const parser = new DOMParser();
-            const doc = parser.parseFromString(reader.result, 'image/svg+xml');
-            const imp = doc.querySelector('svg');
-            if (!imp) { alert('Не удалось разобрать SVG'); return; }
-            Array.from(imp.children).forEach(c => getActiveLayer().appendChild(document.importNode(c, true)));
-            pushHistory();
-            document.getElementById('stStatus').textContent = 'SVG импортирован';
-        };
-        reader.readAsText(file); e.target.value = '';
-    });
-
-    // Drag & drop
-    // dropzone click removed — start with blank canvas
-    viewport.addEventListener('dragover', (e) => { e.preventDefault(); dropzone.classList.add('drag-over'); });
-    viewport.addEventListener('dragleave', () => dropzone.classList.remove('drag-over'));
-    viewport.addEventListener('drop', (e) => {
-        e.preventDefault(); dropzone.classList.remove('drag-over');
-        const file = e.dataTransfer.files[0];
-        if (file && file.name.endsWith('.svg')) {
-            const reader = new FileReader();
-            reader.onload = () => {
-                const doc = new DOMParser().parseFromString(reader.result, 'image/svg+xml');
-                const imp = doc.querySelector('svg');
-                if (imp) { Array.from(imp.children).forEach(c => getActiveLayer().appendChild(document.importNode(c, true))); pushHistory(); }
-            };
-            reader.readAsText(file);
-        }
-    });
-
-    // Export SVG
-    document.getElementById('btnExportSvg').addEventListener('click', () => {
-        deselectAll();
-        // Strip positioning styles before export
-        const savedStyle = svg.getAttribute('style') || '';
-        svg.removeAttribute('style');
-
-        // Convert inline attributes to CSS classes
-        const clone = svg.cloneNode(true);
-        const styleMap = new Map();
-        let classIdx = 0;
-
-        function getStyleKey(el) {
-            const attrs = ['fill', 'fill-opacity', 'stroke', 'stroke-width', 'stroke-linecap', 'stroke-linejoin', 'opacity', 'font-size', 'font-family', 'font-weight', 'letter-spacing'];
-            const parts = [];
-            attrs.forEach(a => {
-                const v = el.getAttribute(a);
-                if (v !== null) parts.push(a + ':' + v);
-            });
-            return parts.join(';');
-        }
-
-        function processElement(el) {
-            if (el.nodeType !== 1) return;
-            const tag = el.tagName;
-            if (tag === 'g' || tag === 'svg') {
-                Array.from(el.children).forEach(processElement);
-                return;
-            }
-            const key = getStyleKey(el);
-            if (!key) return;
-
-            let className;
-            if (styleMap.has(key)) {
-                className = styleMap.get(key);
-            } else {
-                className = 'st' + classIdx++;
-                styleMap.set(key, className);
-            }
-            el.setAttribute('class', className);
-
-            // Remove inline style attributes that are now in CSS
-            ['fill', 'fill-opacity', 'stroke', 'stroke-width', 'stroke-linecap', 'stroke-linejoin', 'opacity', 'font-size', 'font-family', 'font-weight', 'letter-spacing'].forEach(a => {
-                el.removeAttribute(a);
-            });
-        }
-
-        Array.from(clone.children).forEach(processElement);
-
-        // Build <style> block
-        if (styleMap.size > 0) {
-            const styleEl = document.createElementNS('http://www.w3.org/2000/svg', 'style');
-            let css = '';
-            styleMap.forEach((cls, key) => {
-                css += '.' + cls + '{' + key + '}\n';
-            });
-            styleEl.textContent = css;
-            clone.insertBefore(styleEl, clone.firstChild);
-        }
-
-        // Remove data-* attributes from export
-        clone.querySelectorAll('[data-name]').forEach(el => el.removeAttribute('data-name'));
-        clone.querySelectorAll('[data-layer]').forEach(el => el.removeAttribute('data-layer'));
-
-        const data = new XMLSerializer().serializeToString(clone);
-        if (savedStyle) svg.setAttribute('style', savedStyle); else positionCanvas();
-        const a = document.createElement('a');
-        a.href = URL.createObjectURL(new Blob([data], { type: 'image/svg+xml' }));
-        a.download = 'drawing.svg'; a.click(); URL.revokeObjectURL(a.href);
-        document.getElementById('stStatus').textContent = 'SVG экспортирован';
-    });
-
-    // Export PNG
-    document.getElementById('btnExportPng').addEventListener('click', () => {
-        deselectAll();
-        const savedStyle = svg.getAttribute('style') || '';
-        svg.removeAttribute('style');
-        const data = new XMLSerializer().serializeToString(svg);
-        if (savedStyle) svg.setAttribute('style', savedStyle); else positionCanvas();
-        const canvas = document.createElement('canvas'); canvas.width = 800; canvas.height = 600;
-        const ctx = canvas.getContext('2d'); ctx.fillStyle = '#fff'; ctx.fillRect(0, 0, 800, 600);
-        const img = new Image();
-        img.onload = () => { ctx.drawImage(img, 0, 0); const a = document.createElement('a'); a.href = canvas.toDataURL('image/png'); a.download = 'drawing.png'; a.click(); document.getElementById('stStatus').textContent = 'PNG экспортирован'; };
-        img.src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(data)));
-    });
-
-    // Optimize
-    document.getElementById('btnOptimize').addEventListener('click', async () => {
-        deselectAll();
-        const savedStyle = svg.getAttribute('style') || '';
-        svg.removeAttribute('style');
-        const data = new XMLSerializer().serializeToString(svg);
-        if (savedStyle) svg.setAttribute('style', savedStyle); else positionCanvas();
-        document.getElementById('stStatus').textContent = 'Оптимизация...';
-        try {
-            const res = await fetch('/api/svg-optimize', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ svg: data }) });
-            const result = await res.json();
-            if (result.svg) {
-                const doc = new DOMParser().parseFromString(result.svg, 'image/svg+xml');
-                const s = doc.querySelector('svg');
-                if (s) { svg.innerHTML = s.innerHTML; pushHistory(); }
-                document.getElementById('stStatus').textContent = `Оптимизировано: −${result.saved}%`;
-            }
-        } catch { document.getElementById('stStatus').textContent = 'Ошибка'; }
-    });
-
-    // ── Keyboard ──
-    document.addEventListener('keydown', (e) => {
-        if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.tagName === 'SELECT') return;
-        const ctrl = e.ctrlKey || e.metaKey;
-        if (e.code === 'KeyV' && !ctrl) document.querySelector('[data-tool="select"]').click();
-        else if (e.code === 'KeyR' && !ctrl) document.querySelector('[data-tool="rect"]').click();
-        else if (e.code === 'KeyO' && !ctrl) document.querySelector('[data-tool="circle"]').click();
-        else if (e.code === 'KeyL' && !ctrl) document.querySelector('[data-tool="line"]').click();
-        else if (e.code === 'KeyP' && !ctrl) document.querySelector('[data-tool="path"]').click();
-        else if (e.code === 'KeyT' && !ctrl) document.querySelector('[data-tool="text"]').click();
-        else if ((e.code === 'Delete' || e.code === 'Backspace') && selectedEl) { selectedEl.remove(); deselectAll(); pushHistory(); }
-        else if (ctrl && e.code === 'KeyZ' && !e.shiftKey) { e.preventDefault(); undo(); }
-        else if (ctrl && e.code === 'KeyZ' && e.shiftKey) { e.preventDefault(); redo(); }
-        else if (ctrl && e.code === 'KeyC' && selectedEl) {
-            e.preventDefault();
-            window._svgClipboard = selectedEl.cloneNode(true);
-            document.getElementById('stStatus').textContent = 'Скопировано';
-        }
-        else if (ctrl && e.code === 'KeyV' && window._svgClipboard) {
-            e.preventDefault();
-            const clone = window._svgClipboard.cloneNode(true);
-            // Offset paste position
-            const tag = clone.tagName;
-            if (tag === 'rect' || tag === 'text' || tag === 'image') {
-                clone.setAttribute('x', parseFloat(clone.getAttribute('x') || 0) + 20);
-                clone.setAttribute('y', parseFloat(clone.getAttribute('y') || 0) + 20);
-            } else if (tag === 'ellipse' || tag === 'circle') {
-                clone.setAttribute('cx', parseFloat(clone.getAttribute('cx') || 0) + 20);
-                clone.setAttribute('cy', parseFloat(clone.getAttribute('cy') || 0) + 20);
-            } else if (tag === 'line') {
-                ['x1','y1','x2','y2'].forEach(a => clone.setAttribute(a, parseFloat(clone.getAttribute(a) || 0) + 20));
-            } else {
-                const t = clone.getAttribute('transform') || '';
-                const m = t.match(/translate\(\s*([^,)\s]+)\s*,?\s*([^)\s]*)\s*\)/);
-                let ox = m ? parseFloat(m[1]) || 0 : 0;
-                let oy = m ? parseFloat(m[2]) || 0 : 0;
-                const rest = t.replace(/translate\([^)]*\)/, '').trim();
-                clone.setAttribute('transform', `translate(${ox + 20},${oy + 20}) ${rest}`.trim());
-            }
-            svg.appendChild(clone);
-            pushHistory();
-            selectElement(clone);
-            document.getElementById('stStatus').textContent = 'Вставлено';
-        }
-        else if (ctrl && e.code === 'KeyX' && selectedEl) {
-            e.preventDefault();
-            window._svgClipboard = selectedEl.cloneNode(true);
-            selectedEl.remove();
-            deselectAll();
-            pushHistory();
-            document.getElementById('stStatus').textContent = 'Вырезано';
-        }
-        else if (ctrl && e.code === 'KeyD') { e.preventDefault(); document.getElementById('btnDuplicate').click(); }
-        else if (ctrl && e.code === 'KeyS') { e.preventDefault(); document.getElementById('btnExportSvg').click(); }
-        else if (ctrl && e.code === 'KeyO') { e.preventDefault(); document.getElementById('btnImport').click(); }
-        else if (e.code === 'ArrowLeft' || e.code === 'ArrowRight' || e.code === 'ArrowUp' || e.code === 'ArrowDown') {
-            if (!selectedEl) return;
-            e.preventDefault();
-            const step = e.shiftKey ? 10 : 1;
-            const tag = selectedEl.tagName;
-            let dx = 0, dy = 0;
-            if (e.code === 'ArrowLeft') dx = -step;
-            if (e.code === 'ArrowRight') dx = step;
-            if (e.code === 'ArrowUp') dy = -step;
-            if (e.code === 'ArrowDown') dy = step;
-
-            if (tag === 'rect' || tag === 'text' || tag === 'image') {
-                selectedEl.setAttribute('x', parseFloat(selectedEl.getAttribute('x') || 0) + dx);
-                selectedEl.setAttribute('y', parseFloat(selectedEl.getAttribute('y') || 0) + dy);
-            } else if (tag === 'ellipse' || tag === 'circle') {
-                selectedEl.setAttribute('cx', parseFloat(selectedEl.getAttribute('cx') || 0) + dx);
-                selectedEl.setAttribute('cy', parseFloat(selectedEl.getAttribute('cy') || 0) + dy);
-            } else if (tag === 'line') {
-                selectedEl.setAttribute('x1', parseFloat(selectedEl.getAttribute('x1') || 0) + dx);
-                selectedEl.setAttribute('y1', parseFloat(selectedEl.getAttribute('y1') || 0) + dy);
-                selectedEl.setAttribute('x2', parseFloat(selectedEl.getAttribute('x2') || 0) + dx);
-                selectedEl.setAttribute('y2', parseFloat(selectedEl.getAttribute('y2') || 0) + dy);
-            } else {
-                const t = selectedEl.getAttribute('transform') || '';
-                const m = t.match(/translate\(([^,)]+),?([^)]*)/);
-                let ox = 0, oy = 0;
-                if (m) { ox = parseFloat(m[1]) || 0; oy = parseFloat(m[2]) || 0; }
-                // Preserve scale and other transforms, only update translate
-                const rest = t.replace(/translate\([^)]*\)/, '').trim();
-                selectedEl.setAttribute('transform', `translate(${ox + dx},${oy + dy}) ${rest}`.trim());
-            }
-            showHandles();
-            pushHistory();
-        }
-        else if (e.code === 'Escape') { deselectAll(); if (tempEl && currentTool === 'path') { tempEl.remove(); tempEl = null; } pathPoints = []; hidePenPoints(); }
-    });
-
-    // ── AI Modal ──
-    const ICONS = {
-        home:'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-4 0v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4',
-        user:'M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z',
-        search:'M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z',
-        heart:'M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z',
-        star:'M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z',
-        settings:'M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z M15 12a3 3 0 11-6 0 3 3 0 016 0z',
-        mail:'M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75',
-        phone:'M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z',
-        lock:'M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z',
-        bell:'M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0',
-        clock:'M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z',
-        cloud:'M2.25 15a4.5 4.5 0 004.5 4.5H18a3.75 3.75 0 001.332-7.257 3 3 0 00-3.758-3.848 5.25 5.25 0 00-10.233 2.33A4.502 4.502 0 002.25 15z',
-        download:'M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3',
-        upload:'M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5',
-        trash:'M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0',
-        plus:'M12 4.5v15m7.5-7.5h-15', minus:'M19.5 12h-15',
-        check:'M4.5 12.75l6 6 9-13.5', close:'M6 18L18 6M6 6l12 12',
-        'arrow-left':'M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18', 'arrow-right':'M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3',
-        'arrow-up':'M4.5 10.5L12 3m0 0l7.5 7.5M12 3v18', 'arrow-down':'M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3',
-        menu:'M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5',
-        globe:'M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418',
-        link:'M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m9.86-2.06a4.5 4.5 0 00-6.364-6.364L6.257 6.514a4.5 4.5 0 001.242 7.244',
-        eye:'M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z M15 12a3 3 0 11-6 0 3 3 0 016 0z',
-        sun:'M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z',
-        moon:'M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z',
-        code:'M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5',
-        terminal:'M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z',
-        database:'M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125',
-        wifi:'M8.288 15.038a5.25 5.25 0 017.424 0M5.106 11.856c3.807-3.808 9.98-3.808 13.788 0M1.924 8.674c5.565-5.565 14.587-5.565 20.152 0M12.53 18.22l-.53.53-.53-.53a.75.75 0 011.06 0z',
-        bookmark:'M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z',
-        share:'M7.217 10.907a2.25 2.25 0 100 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186l9.566-5.314m-9.566 7.5l9.566 5.314m0 0a2.25 2.25 0 103.935 2.186 2.25 2.25 0 00-3.935-2.186zm0-12.814a2.25 2.25 0 103.933-2.185 2.25 2.25 0 00-3.933 2.185z',
-        cart:'M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z',
-        file:'M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z',
-        folder:'M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z',
-        camera:'M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z',
-    };
-    const NAMES = {home:'дом',user:'юзер',search:'поиск',heart:'сердце',star:'звезда',settings:'настройки',mail:'почта',phone:'телефон',lock:'замок',bell:'колокол',clock:'часы',cloud:'облако',download:'скачать',upload:'загрузить',trash:'корзина',plus:'плюс',minus:'минус',check:'галочка',close:'закрыть','arrow-left':'←','arrow-right':'→','arrow-up':'↑','arrow-down':'↓',menu:'меню',globe:'глобус',link:'ссылка',eye:'глаз',sun:'солнце',moon:'луна',code:'код',terminal:'терминал',database:'БД',wifi:'wifi',bookmark:'закладка',share:'поделиться',cart:'корзина',file:'файл',folder:'папка',camera:'камера'};
-
-    let aiSelected = null;
-    document.getElementById('btnAI').addEventListener('click', () => { document.getElementById('aiModal').classList.add('visible'); renderAiGrid(); });
-    document.getElementById('aiCancel').addEventListener('click', () => document.getElementById('aiModal').classList.remove('visible'));
-    document.getElementById('aiModal').addEventListener('click', (e) => { if (e.target.id === 'aiModal') e.target.classList.remove('visible'); });
-    document.getElementById('aiSearch').addEventListener('input', renderAiGrid);
-
-    function renderAiGrid() {
-        const q = document.getElementById('aiSearch').value.toLowerCase().trim();
-        const color = document.getElementById('aiColor').value;
-        const style = document.getElementById('aiStyle').value;
-        const sz = Math.min(parseInt(document.getElementById('aiSize').value), 40);
-        let keys = Object.keys(ICONS);
-        if (q) keys = keys.filter(k => k.includes(q) || (NAMES[k] && NAMES[k].includes(q)));
-        const grid = document.getElementById('aiGrid');
-        grid.innerHTML = keys.map(k => {
-            const d = ICONS[k];
-            let s;
-            if (style === 'outline') s = `<svg width="${sz}" height="${sz}" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="${d}"/></svg>`;
-            else if (style === 'filled') s = `<svg width="${sz}" height="${sz}" viewBox="0 0 24 24" fill="${color}" stroke="none"><path d="${d}"/></svg>`;
-            else s = `<svg width="${sz}" height="${sz}" viewBox="0 0 24 24" fill="${color}" fill-opacity="0.2" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="${d}"/></svg>`;
-            return `<div class="icon-card" data-icon="${k}">${s}<span>${NAMES[k]||k}</span></div>`;
-        }).join('');
-        grid.querySelectorAll('.icon-card').forEach(c => c.addEventListener('click', () => {
-            grid.querySelectorAll('.icon-card').forEach(x => x.classList.remove('selected'));
-            c.classList.add('selected'); aiSelected = c.dataset.icon;
-        }));
-    }
-    document.getElementById('aiAdd').addEventListener('click', () => {
-        if (!aiSelected || !ICONS[aiSelected]) return;
-        const color = document.getElementById('aiColor').value;
-        const style = document.getElementById('aiStyle').value;
-        const size = parseInt(document.getElementById('aiSize').value);
-        const g = svgEl('g', { 'data-name': NAMES[aiSelected] || aiSelected, transform: `translate(${400-size/2},${300-size/2}) scale(${size/24})` });
-        const p = svgEl('path', { d: ICONS[aiSelected] });
-        if (style === 'outline') { p.setAttribute('fill','none'); p.setAttribute('stroke',color); p.setAttribute('stroke-width','1.5'); p.setAttribute('stroke-linecap','round'); p.setAttribute('stroke-linejoin','round'); }
-        else if (style === 'filled') { p.setAttribute('fill',color); }
-        else { p.setAttribute('fill',color); p.setAttribute('fill-opacity','0.2'); p.setAttribute('stroke',color); p.setAttribute('stroke-width','1.5'); p.setAttribute('stroke-linecap','round'); p.setAttribute('stroke-linejoin','round'); }
-        g.appendChild(p); getActiveLayer().appendChild(g); pushHistory();
-        document.getElementById('aiModal').classList.remove('visible');
-        document.getElementById('stStatus').textContent = `Добавлено: ${NAMES[aiSelected]||aiSelected}`;
-    });
-    renderAiGrid();
-
-    // ── Text to Path via opentype.js ──
-    const fontCache = {};
-
-    function getFontUrl(ff, fw) {
-        const w = parseInt(fw) || 400;
-        if (ff.includes('JetBrains')) return '/vendor/fonts/jetbrains-' + w + '.ttf';
-        return '/vendor/fonts/manrope-' + w + '.ttf';
-    }
-
-    async function loadFont(url) {
-        if (fontCache[url]) return fontCache[url];
-        try {
-            const font = await opentype.load(url);
-            fontCache[url] = font;
-            return font;
-        } catch(e) {
-            console.error('Font load error:', e);
-            return null;
-        }
-    }
-
-    async function rasterizeText(textEl) {
-        if (!textEl || textEl.tagName !== 'text') return;
-
-        const text = textEl.textContent || '';
-        if (!text.trim()) return;
-
-        const fs = parseFloat(textEl.getAttribute('font-size') || 20);
-        const ff = textEl.getAttribute('font-family') || 'Manrope, sans-serif';
-        const fw = textEl.getAttribute('font-weight') || '400';
-        const fill = textEl.getAttribute('fill') || '#000';
-        const ls = parseFloat(textEl.getAttribute('letter-spacing') || 0);
-        const x = parseFloat(textEl.getAttribute('x') || 0);
-        const y = parseFloat(textEl.getAttribute('y') || 0);
-
-        document.getElementById('stStatus').textContent = 'Загрузка шрифта...';
-
-        const fontUrl = getFontUrl(ff, fw);
-        const font = await loadFont(fontUrl);
-
-        if (!font) {
-            document.getElementById('stStatus').textContent = 'Ошибка загрузки шрифта';
-            return;
-        }
-
-        // Generate path using opentype.js
-        const otPath = font.getPath(text, x, y, fs, { letterSpacing: ls / fs });
-        const pathD = otPath.toPathData(2);
-
-        if (!pathD) {
-            document.getElementById('stStatus').textContent = 'Не удалось создать контур';
-            return;
-        }
-
-        const pathEl = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-        pathEl.setAttribute('d', pathD);
-        pathEl.setAttribute('fill', fill);
-        pathEl.setAttribute('fill-rule', 'nonzero');
-        pathEl.setAttribute('data-name', 'Контур: ' + text.substring(0, 20));
-
-        const parent = textEl.parentElement;
-        parent.insertBefore(pathEl, textEl);
-        textEl.remove();
-
-        if (selectedEl === textEl) selectedEl = pathEl;
-        pushHistory();
-        selectElement(pathEl);
-        document.getElementById('stStatus').textContent = 'Текст → контур';
-    }
-
-    document.getElementById('btnRasterize').addEventListener('click', async () => {
-        if (selectedEl && selectedEl.tagName === 'text') await rasterizeText(selectedEl);
-        else document.getElementById('stStatus').textContent = 'Выделите текстовый элемент';
-    });
-
-
-    // ── Alignment Tools ──
-    function alignSelected(mode) {
-        if (!selectedEl) return;
-        const canvasW = parseInt(svg.getAttribute('width'));
-        const canvasH = parseInt(svg.getAttribute('height'));
-        const bb = selectedEl.getBBox();
-        const tag = selectedEl.tagName;
-        const hasTransform = tag === 'g' || tag === 'path' || tag === 'text';
-
-        // Get current visual position
-        let curX, curY;
-        if (tag === 'rect' || tag === 'image') { curX = parseFloat(selectedEl.getAttribute('x')||0); curY = parseFloat(selectedEl.getAttribute('y')||0); }
-        else if (tag === 'ellipse' || tag === 'circle') { curX = parseFloat(selectedEl.getAttribute('cx')||0) - bb.width/2; curY = parseFloat(selectedEl.getAttribute('cy')||0) - bb.height/2; }
-        else if (tag === 'line') { curX = Math.min(parseFloat(selectedEl.getAttribute('x1')),parseFloat(selectedEl.getAttribute('x2'))); curY = Math.min(parseFloat(selectedEl.getAttribute('y1')),parseFloat(selectedEl.getAttribute('y2'))); }
-        else { curX = bb.x; curY = bb.y; }
-
-        let newX = curX, newY = curY;
-        if (mode === 'left') newX = 0;
-        else if (mode === 'centerX') newX = (canvasW - bb.width) / 2;
-        else if (mode === 'right') newX = canvasW - bb.width;
-        else if (mode === 'top') newY = 0;
-        else if (mode === 'centerY') newY = (canvasH - bb.height) / 2;
-        else if (mode === 'bottom') newY = canvasH - bb.height;
-
-        const dx = newX - curX, dy = newY - curY;
-        if (Math.abs(dx) < 0.1 && Math.abs(dy) < 0.1) return;
-
-        if (tag === 'rect' || tag === 'image') {
-            selectedEl.setAttribute('x', parseFloat(selectedEl.getAttribute('x')||0) + dx);
-            selectedEl.setAttribute('y', parseFloat(selectedEl.getAttribute('y')||0) + dy);
-        } else if (tag === 'ellipse' || tag === 'circle') {
-            selectedEl.setAttribute('cx', parseFloat(selectedEl.getAttribute('cx')||0) + dx);
-            selectedEl.setAttribute('cy', parseFloat(selectedEl.getAttribute('cy')||0) + dy);
-        } else if (tag === 'line') {
-            selectedEl.setAttribute('x1', parseFloat(selectedEl.getAttribute('x1')||0) + dx);
-            selectedEl.setAttribute('y1', parseFloat(selectedEl.getAttribute('y1')||0) + dy);
-            selectedEl.setAttribute('x2', parseFloat(selectedEl.getAttribute('x2')||0) + dx);
-            selectedEl.setAttribute('y2', parseFloat(selectedEl.getAttribute('y2')||0) + dy);
-        } else {
-            const t = selectedEl.getAttribute('transform') || '';
-            const m = t.match(/translate\(\s*([^,)\s]+)\s*,?\s*([^)\s]*)\s*\)/);
-            let ox = m ? parseFloat(m[1])||0 : 0, oy = m ? parseFloat(m[2])||0 : 0;
-            const rest = t.replace(/translate\([^)]*\)/, '').trim();
-            selectedEl.setAttribute('transform', `translate(${ox+dx},${oy+dy}) ${rest}`.trim());
-        }
-        pushHistory(); showHandles(); updateProps();
-    }
-
-    document.getElementById('btnAlignL').addEventListener('click', () => alignSelected('left'));
-    document.getElementById('btnAlignCX').addEventListener('click', () => alignSelected('centerX'));
-    document.getElementById('btnAlignR').addEventListener('click', () => alignSelected('right'));
-    document.getElementById('btnAlignT').addEventListener('click', () => alignSelected('top'));
-    document.getElementById('btnAlignCY').addEventListener('click', () => alignSelected('centerY'));
-    document.getElementById('btnAlignB').addEventListener('click', () => alignSelected('bottom'));
-
-    // ── Dev Mode (SVG Code Viewer/Editor) ──
-    document.getElementById('btnDevMode').addEventListener('click', () => {
-        const savedStyle = svg.getAttribute('style') || '';
-        svg.removeAttribute('style');
-        let code = new XMLSerializer().serializeToString(svg);
-        if (savedStyle) svg.setAttribute('style', savedStyle); else positionCanvas();
-        // Pretty print
-        code = code.replace(/></g, '>\n<');
-        code = code.replace(/\n\n+/g, '\n');
-        document.getElementById('devCode').value = code;
-        document.getElementById('devModal').classList.add('visible');
-    });
-    document.getElementById('devClose').addEventListener('click', () => document.getElementById('devModal').classList.remove('visible'));
-    document.getElementById('devModal').addEventListener('click', (e) => { if (e.target.id === 'devModal') e.target.classList.remove('visible'); });
-    document.getElementById('devCopy').addEventListener('click', () => {
-        const ta = document.getElementById('devCode');
-        ta.select();
-        document.execCommand('copy');
-        document.getElementById('devCopy').textContent = 'Скопировано!';
-        setTimeout(() => document.getElementById('devCopy').textContent = 'Копировать', 1500);
-    });
-
-    // Apply edited SVG code back
-    document.getElementById('devCode').addEventListener('keydown', (e) => {
-        if ((e.ctrlKey || e.metaKey) && e.code === 'Enter') {
-            e.preventDefault();
-            const code = document.getElementById('devCode').value;
-            try {
-                const doc = new DOMParser().parseFromString(code, 'image/svg+xml');
-                const newSvg = doc.querySelector('svg');
-                if (newSvg) {
-                    svg.innerHTML = newSvg.innerHTML;
-                    initLayers();
-                    deselectAll();
-                    pushHistory();
-                    document.getElementById('devModal').classList.remove('visible');
-                    document.getElementById('stStatus').textContent = 'SVG код применён';
-                }
-            } catch(err) { alert('Ошибка парсинга SVG'); }
-        }
-        e.stopPropagation();
-    });
-
-
-    // ── Context Menu ──
-    const ctxMenu = document.getElementById('ctxMenu');
-
-    viewport.addEventListener('contextmenu', (e) => {
-        e.preventDefault();
-        const vpR = viewport.getBoundingClientRect();
-
-        // Try to select element under cursor if nothing selected
-        if (!selectedEl) {
-            const hVis = selHandles.style.display;
-            const lhVis = lineHandles.style.display;
-            selHandles.style.display = 'none';
-            lineHandles.style.display = 'none';
-            let target = document.elementFromPoint(e.clientX, e.clientY);
-            selHandles.style.display = hVis;
-            lineHandles.style.display = lhVis;
-            if (target && target !== svg && svg.contains(target)) {
-                while (target.parentElement && target.parentElement !== svg) target = target.parentElement;
-                selectElement(target);
-            }
-        }
-
-        // Update menu items state
-        ctxMenu.querySelectorAll('.ctx-item').forEach(item => {
-            const a = item.dataset.action;
-            if (a === 'paste') item.classList.toggle('disabled', !window._svgClipboard);
-            else if (a === 'ungroup') item.classList.toggle('disabled', !selectedEl || selectedEl.tagName !== 'g' || !!selectedEl.getAttribute('data-layer'));
-            else if (a === 'rasterize') item.classList.toggle('disabled', !selectedEl || selectedEl.tagName !== 'text');
-            else if (a === 'group') item.classList.toggle('disabled', svg.children.length < 2);
-            else item.classList.toggle('disabled', !selectedEl);
-        });
-
-        ctxMenu.classList.add('visible');
-        const menuW = ctxMenu.offsetWidth;
-        const menuH = ctxMenu.offsetHeight;
-        let mx = e.clientX - vpR.left;
-        let my = e.clientY - vpR.top;
-        if (mx + menuW > vpR.width) mx = vpR.width - menuW - 4;
-        if (my + menuH > vpR.height) my = vpR.height - menuH - 4;
-        if (mx < 0) mx = 4;
-        if (my < 0) my = 4;
-        ctxMenu.style.left = mx + 'px';
-        ctxMenu.style.top = my + 'px';
-    });
-
-    document.addEventListener('click', () => ctxMenu.classList.remove('visible'));
-    document.addEventListener('keydown', (e) => { if (e.code === 'Escape') ctxMenu.classList.remove('visible'); });
-
-    ctxMenu.querySelectorAll('.ctx-item').forEach(item => {
-        item.addEventListener('click', async () => {
-            ctxMenu.classList.remove('visible');
-            const a = item.dataset.action;
-            if (a === 'copy' && selectedEl) {
-                window._svgClipboard = selectedEl.cloneNode(true);
-                document.getElementById('stStatus').textContent = 'Скопировано';
-            } else if (a === 'cut' && selectedEl) {
-                window._svgClipboard = selectedEl.cloneNode(true);
-                selectedEl.remove(); deselectAll(); pushHistory();
-                document.getElementById('stStatus').textContent = 'Вырезано';
-            } else if (a === 'paste' && window._svgClipboard) {
-                const clone = window._svgClipboard.cloneNode(true);
-                const tag = clone.tagName;
-                if (tag === 'rect' || tag === 'text') { clone.setAttribute('x', parseFloat(clone.getAttribute('x')||0)+20); clone.setAttribute('y', parseFloat(clone.getAttribute('y')||0)+20); }
-                else if (tag === 'ellipse') { clone.setAttribute('cx', parseFloat(clone.getAttribute('cx')||0)+20); clone.setAttribute('cy', parseFloat(clone.getAttribute('cy')||0)+20); }
-                else if (tag === 'line') { ['x1','y1','x2','y2'].forEach(a2 => clone.setAttribute(a2, parseFloat(clone.getAttribute(a2)||0)+20)); }
-                else { const t=clone.getAttribute('transform')||''; const m=t.match(/translate\(\s*([^,)\s]+)\s*,?\s*([^)\s]*)\s*\)/); let ox=m?parseFloat(m[1])||0:0,oy=m?parseFloat(m[2])||0:0; const rest=t.replace(/translate\([^)]*\)/,'').trim(); clone.setAttribute('transform',`translate(${ox+20},${oy+20}) ${rest}`.trim()); }
-                getActiveLayer().appendChild(clone); pushHistory(); selectElement(clone);
-            } else if (a === 'duplicate') {
-                document.getElementById('btnDuplicate').click();
-            } else if (a === 'delete' && selectedEl) {
-                selectedEl.remove(); deselectAll(); pushHistory();
-            } else if (a === 'front' && selectedEl) {
-                svg.appendChild(selectedEl); pushHistory(); updateLayers();
-            } else if (a === 'back' && selectedEl) {
-                if (svg.firstChild !== selectedEl) { svg.insertBefore(selectedEl, svg.firstChild); pushHistory(); updateLayers(); }
-            } else if (a === 'group') {
-                // Group all elements in active layer into a <g>
-                const layer = getActiveLayer();
-                if (layer.children.length > 0) {
-                    const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-                    g.setAttribute('data-name', 'Группа');
-                    while (layer.firstChild) g.appendChild(layer.firstChild);
-                    layer.appendChild(g);
-                    pushHistory(); selectElement(g);
-                    document.getElementById('stStatus').textContent = 'Сгруппировано';
-                }
-            } else if (a === 'rasterize' && selectedEl && selectedEl.tagName === 'text') {
-                await rasterizeText(selectedEl);
-            } else if (a === 'ungroup' && selectedEl && selectedEl.tagName === 'g' && !selectedEl.getAttribute('data-layer')) {
-                const g = selectedEl;
-                const children = Array.from(g.children);
-                const parent = g.parentElement;
-                children.forEach(child => parent.insertBefore(child, g));
-                g.remove();
-                deselectAll(); pushHistory();
-                document.getElementById('stStatus').textContent = 'Разгруппировано';
-            }
-        });
-    });
-
-    // Ctrl+G / Ctrl+Shift+G shortcuts
-    document.addEventListener('keydown', (e) => {
-        if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
-        const ctrl = e.ctrlKey || e.metaKey;
-        if (ctrl && e.code === 'KeyG' && !e.shiftKey) {
-            e.preventDefault();
-            const layer = getActiveLayer();
-            if (layer.children.length > 0) {
-                const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-                g.setAttribute('data-name', 'Группа');
-                while (layer.firstChild) g.appendChild(layer.firstChild);
-                layer.appendChild(g);
-                pushHistory(); selectElement(g);
-                document.getElementById('stStatus').textContent = 'Сгруппировано';
-            }
-        } else if (ctrl && e.code === 'KeyG' && e.shiftKey) {
-            e.preventDefault();
-            if (selectedEl && selectedEl.tagName === 'g' && !selectedEl.getAttribute('data-layer')) {
-                const g = selectedEl;
-                const parent = g.parentElement;
-                const children = Array.from(g.children);
-                children.forEach(child => parent.insertBefore(child, g));
-                g.remove(); deselectAll(); pushHistory();
-                document.getElementById('stStatus').textContent = 'Разгруппировано';
-            }
-        }
-    });
-
-
-    // ── Inline Text Editor ──
-    const textOverlay = document.getElementById('textEditOverlay');
-    const textInput = document.getElementById('textEditInput');
-    let editingText = null;
-
-    function startTextEdit(el) {
-        editingText = el;
-        const bb = el.getBBox();
-        const svgRect = svg.getBoundingClientRect();
-        const vpRect = viewport.getBoundingClientRect();
-        const fs = parseFloat(el.getAttribute('font-size') || 20);
-
-        textOverlay.style.display = 'block';
-        textOverlay.style.left = (svgRect.left - vpRect.left + bb.x * zoom) + 'px';
-        textOverlay.style.top = (svgRect.top - vpRect.top + bb.y * zoom) + 'px';
-
-        textInput.value = el.textContent;
-        textInput.style.fontSize = (fs * zoom) + 'px';
-        textInput.style.fontFamily = el.getAttribute('font-family') || 'Manrope, sans-serif';
-        textInput.style.color = el.getAttribute('fill') || '#000';
-        textInput.style.minWidth = (bb.width * zoom + 20) + 'px';
-        textInput.style.height = (bb.height * zoom + 10) + 'px';
-
-        selHandles.style.display = 'none';
-        textInput.focus();
-        textInput.select();
-    }
-
-    function finishTextEdit() {
-        if (!editingText) return;
-        const newText = textInput.value.trim();
-        if (newText && newText !== editingText.textContent) {
-            editingText.textContent = newText;
-            pushHistory();
-        }
-        textOverlay.style.display = 'none';
-        if (editingText) { selectElement(editingText); }
-        editingText = null;
-    }
-
-    textInput.addEventListener('blur', finishTextEdit);
-    textInput.addEventListener('keydown', (e) => {
-        if (e.code === 'Enter' && !e.shiftKey) { e.preventDefault(); finishTextEdit(); }
-        if (e.code === 'Escape') { textOverlay.style.display = 'none'; editingText = null; }
-        e.stopPropagation(); // don't trigger tool shortcuts
-    });
-
-    // ── Tabs ──
-    const tabBar = document.getElementById('tabBar');
-    let tabs = [{ name: 'Новый', svgContent: '', w: 800, h: 600 }];
-    let activeTab = 0;
-
-    function renderTabs() {
-        let html = '';
-        tabs.forEach((t, i) => {
-            html += '<div class="tab-item ' + (i === activeTab ? 'active' : '') + '" data-tab="' + i + '">';
-            html += '<span class="tab-name">' + t.name + '</span>';
-            if (tabs.length > 1) html += '<button class="tab-close" data-close="' + i + '">&times;</button>';
-            html += '</div>';
-        });
-        html += '<button class="tab-add" id="tabAdd" title="Новая вкладка (Ctrl+T)">+</button>';
-        tabBar.innerHTML = html;
-
-        tabBar.querySelectorAll('.tab-item').forEach(el => {
-            el.addEventListener('click', (e) => {
-                if (e.target.closest('.tab-close')) return;
-                switchTab(parseInt(el.dataset.tab));
-            });
-        });
-        tabBar.querySelectorAll('.tab-close').forEach(btn => {
-            btn.addEventListener('click', () => closeTab(parseInt(btn.dataset.close)));
-        });
-        document.getElementById('tabAdd').addEventListener('click', addTab);
-    }
-
-    function saveCurrentTab() {
-        tabs[activeTab].svgContent = svg.innerHTML;
-        tabs[activeTab].w = parseInt(svg.getAttribute('width'));
-        tabs[activeTab].h = parseInt(svg.getAttribute('height'));
-        tabs[activeTab].history = [...history];
-        tabs[activeTab].historyIdx = historyIdx;
-    }
-
-    function switchTab(idx) {
-        if (idx === activeTab) return;
-        saveCurrentTab();
-        deselectAll();
-        activeTab = idx;
-        const t = tabs[idx];
-        svg.innerHTML = t.svgContent;
-        svg.setAttribute('width', t.w); svg.setAttribute('height', t.h);
-        svg.setAttribute('viewBox', '0 0 ' + t.w + ' ' + t.h);
-        history = t.history || [t.svgContent];
-        historyIdx = t.historyIdx !== undefined ? t.historyIdx : 0;
-        document.getElementById('stSize').textContent = t.w + ' \u00d7 ' + t.h;
-        positionCanvas();
-        updateLayers(); updateCount();
-        renderTabs();
-    }
-
-    function addTab() {
-        saveCurrentTab();
-        deselectAll();
-        tabs.push({ name: 'Новый ' + (tabs.length + 1), svgContent: '', w: 800, h: 600, history: [''], historyIdx: 0 });
-        activeTab = tabs.length - 1;
-        svg.innerHTML = '';
-        svg.setAttribute('width', 800); svg.setAttribute('height', 600);
-        svg.setAttribute('viewBox', '0 0 800 600');
-        history = ['']; historyIdx = 0;
-        document.getElementById('stSize').textContent = '800 \u00d7 600';
-        positionCanvas();
-        updateLayers(); updateCount();
-        renderTabs();
-    }
-
-    function closeTab(idx) {
-        if (tabs.length <= 1) return;
-        tabs.splice(idx, 1);
-        if (activeTab >= tabs.length) activeTab = tabs.length - 1;
-        if (activeTab === idx || activeTab > idx) {
-            activeTab = Math.max(0, activeTab > idx ? activeTab - 1 : activeTab);
-        }
-        const t = tabs[activeTab];
-        svg.innerHTML = t.svgContent;
-        svg.setAttribute('width', t.w); svg.setAttribute('height', t.h);
-        svg.setAttribute('viewBox', '0 0 ' + t.w + ' ' + t.h);
-        history = t.history || [t.svgContent];
-        historyIdx = t.historyIdx !== undefined ? t.historyIdx : 0;
-        document.getElementById('stSize').textContent = t.w + ' \u00d7 ' + t.h;
-        positionCanvas();
-        updateLayers(); updateCount();
-        renderTabs();
-    }
-
-    // Ctrl+T for new tab
-    document.addEventListener('keydown', (e) => {
-        if ((e.ctrlKey || e.metaKey) && e.code === 'KeyT' && e.target.tagName !== 'INPUT' && e.target.tagName !== 'TEXTAREA') {
-            e.preventDefault(); addTab();
-        }
-    });
-
-    renderTabs();
-
-    // ── New Canvas ──
-    document.getElementById('btnNew').addEventListener('click', () => document.getElementById('newModal').classList.add('visible'));
-    document.getElementById('newCancel').addEventListener('click', () => document.getElementById('newModal').classList.remove('visible'));
-    document.getElementById('newModal').addEventListener('click', (e) => { if (e.target.id === 'newModal') e.target.classList.remove('visible'); });
-    document.getElementById('newCreate').addEventListener('click', () => {
-        const w = parseInt(document.getElementById('newW').value) || 800;
-        const h = parseInt(document.getElementById('newH').value) || 600;
-        svg.setAttribute('width', w); svg.setAttribute('height', h);
-        svg.setAttribute('viewBox', `0 0 ${w} ${h}`);
-        svg.innerHTML = '';
-        deselectAll();
-        history = []; historyIdx = -1; pushHistory();
-        document.getElementById('stSize').textContent = `${w} \u00d7 ${h}`;
-        document.getElementById('newModal').classList.remove('visible');
-        document.getElementById('stStatus').textContent = `Холст ${w}×${h} создан`;
-        positionCanvas();
-    });
-    // Ctrl+N
-    document.addEventListener('keydown', (e) => {
-        if ((e.ctrlKey || e.metaKey) && e.code === 'KeyN') { e.preventDefault(); document.getElementById('btnNew').click(); }
-    });
-})();
-</script>
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="ru" class="dark">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>SVG Editor — WA Dev Tools</title>
+    <script src="/vendor/tailwind.js"></script>
+    <script>window.WA_TOOL_ID = 'svgeditor';</script>
+    <script src="/shared.js"></script>
+    <link href="/vendor/fonts.css" rel="stylesheet">
+    <link href="/shared.css" rel="stylesheet">
+    <script src="/vendor/opentype.min.js"></script>
+<style>
+*{margin:0;padding:0;box-sizing:border-box}
+input,select,button,textarea{font-family:inherit;font-size:inherit}
+
+/* Main layout */
+.editor-wrap{margin-left:56px;height:100vh;display:flex;flex-direction:column}
+
+/* Toolbar */
+.toolbar{height:44px;background:var(--surface-800);border-bottom:1px solid var(--surface-600);display:flex;align-items:center;padding:0 12px;gap:4px;flex-shrink:0;z-index:20}
+.toolbar-group{display:flex;align-items:center;gap:2px}
+.toolbar-sep{width:1px;height:24px;background:var(--surface-600);margin:0 6px}
+.tb{width:34px;height:34px;border:none;border-radius:8px;background:transparent;color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;position:relative}
+.tb:hover{color:#fff;background:rgba(255,255,255,.08)}
+.tb.active{color:var(--accent);background:var(--accent-bg)}
+.tb:disabled{opacity:.3;cursor:default;pointer-events:none}
+.tb svg{width:18px;height:18px}
+.toolbar-right{margin-left:auto;display:flex;align-items:center;gap:4px}
+
+/* Tool Options Bar */
+.tool-options{height:36px;background:var(--surface-700);border-bottom:1px solid var(--surface-600);display:none;align-items:center;padding:0 12px;gap:8px;flex-shrink:0;z-index:19}
+.tool-options.visible{display:flex}
+.tool-options label{font-size:11px;color:var(--text-muted);white-space:nowrap;font-family:'JetBrains Mono',monospace}
+.tool-options input[type="range"]{width:80px;accent-color:var(--accent);height:4px;cursor:pointer}
+.tool-options input[type="number"]{width:60px;background:var(--surface-600);border:1px solid transparent;color:var(--text-secondary);padding:3px 6px;border-radius:5px;text-align:center;font-family:'JetBrains Mono',monospace;font-size:11px}
+.tool-options input[type="number"]:focus{border-color:var(--accent);outline:none}
+.tool-options input[type="text"]{width:120px;background:var(--surface-600);border:1px solid transparent;color:var(--text-secondary);padding:3px 6px;border-radius:5px;font-family:'JetBrains Mono',monospace;font-size:11px}
+.tool-options input[type="text"]:focus{border-color:var(--accent);outline:none}
+.tool-options select{background:var(--surface-600);border:1px solid transparent;color:var(--text-secondary);padding:3px 8px;border-radius:5px;cursor:pointer;font-size:11px}
+.tool-options select:focus{border-color:var(--accent);outline:none}
+.tool-options .opt-sep{width:1px;height:20px;background:var(--surface-600)}
+.opt-btn{padding:3px 10px;border:1px solid var(--surface-600);border-radius:5px;background:transparent;color:var(--text-secondary);cursor:pointer;font-size:11px;transition:all .15s}
+.opt-btn:hover{border-color:var(--text-muted)}
+.opt-btn.primary{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}
+.opt-btn.primary:hover{background:var(--accent-dim)}
+
+/* Color swatch */
+.color-swatch{width:28px;height:28px;border-radius:6px;overflow:hidden;border:2px solid var(--surface-600);cursor:pointer;position:relative}
+.color-swatch input[type="color"]{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);cursor:pointer;border:none;padding:0}
+
+/* Viewport */
+.viewport{flex:1;overflow:hidden;position:relative;background:#2c2c30}
+#svgCanvas{background:#fff;box-shadow:0 2px 20px rgba(0,0,0,.4)}
+.viewport svg{position:absolute;transform-origin:0 0;cursor:crosshair}
+
+/* Grid dots */
+.grid-dots{position:absolute;inset:0;pointer-events:none;z-index:1}
+
+/* Selection box */
+
+/* Tab Bar */
+.tab-bar{height:30px;background:var(--surface-800);border-bottom:1px solid var(--surface-600);display:flex;align-items:stretch;overflow-x:auto;overflow-y:hidden;flex-shrink:0;scrollbar-width:none;z-index:18}
+.tab-bar::-webkit-scrollbar{display:none}
+.tab-item{display:flex;align-items:center;gap:5px;padding:0 8px 0 12px;border-right:1px solid var(--surface-600);white-space:nowrap;cursor:pointer;font-size:11px;font-family:'JetBrains Mono',monospace;color:var(--text-muted);flex-shrink:0;max-width:160px;transition:color .15s;position:relative}
+.tab-item:hover{color:var(--text-secondary);background:rgba(255,255,255,.03)}
+.tab-item.active{color:var(--text-primary);background:var(--surface-700);border-bottom:2px solid var(--accent)}
+.tab-name{flex:1;overflow:hidden;text-overflow:ellipsis;min-width:40px}
+.tab-close{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:14px;line-height:1;padding:0 2px;border-radius:3px}
+.tab-close:hover{color:var(--text-secondary);background:rgba(255,255,255,.08)}
+.tab-add{width:30px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);cursor:pointer;border:none;background:none;font-size:16px;transition:color .15s}
+.tab-add:hover{color:var(--text-secondary)}
+
+/* Inline text editor */
+.text-edit-overlay{position:absolute;z-index:15;display:none}
+.text-edit-input{background:rgba(0,84,230,0.05);border:1.5px solid var(--accent);outline:none;padding:2px 4px;font-family:'Manrope',sans-serif;color:#000;resize:none;min-width:20px;white-space:pre;overflow:hidden;border-radius:2px;box-shadow:0 0 0 3px rgba(0,84,230,0.1)}
+
+
+/* Context Menu */
+
+.lp-layer{display:flex;align-items:center;gap:6px;padding:7px 10px;font-size:11px;font-family:'JetBrains Mono',monospace;color:var(--text-secondary);cursor:pointer;border-bottom:1px solid rgba(255,255,255,.04);transition:background .1s;font-weight:600}
+.lp-layer:hover{background:rgba(255,255,255,.03)}
+.lp-layer.active{background:var(--accent-bg);color:var(--accent);border-left:2px solid var(--accent)}
+.lp-layer .lp-name{flex:1}
+.lp-child{display:flex;align-items:center;gap:6px;padding:4px 10px 4px 24px;font-size:10px;font-family:'JetBrains Mono',monospace;color:var(--text-muted);cursor:pointer;border-bottom:1px solid rgba(255,255,255,.02);transition:background .1s}
+.lp-child:hover{background:rgba(255,255,255,.03)}
+.lp-child.selected{color:var(--accent);background:rgba(0,84,230,.05)}
+.lp-add-layer{display:flex;align-items:center;justify-content:center;gap:4px;padding:8px;font-size:11px;font-family:'JetBrains Mono',monospace;color:var(--text-muted);cursor:pointer;border-top:1px solid var(--surface-600);transition:all .15s}
+.lp-add-layer:hover{color:var(--text-secondary);background:rgba(255,255,255,.03)}
+.lp-lock{opacity:.5;font-size:10px;cursor:pointer;padding:0 2px}.lp-lock:hover{opacity:1}.lp-lock.locked{opacity:1;color:var(--accent)}
+.ctx-menu{position:absolute;z-index:50;background:var(--surface-700);border:1px solid var(--surface-600);border-radius:8px;padding:4px 0;min-width:180px;display:none;box-shadow:0 8px 24px rgba(0,0,0,.3)}
+.ctx-menu.visible{display:block}
+.ctx-item{display:flex;align-items:center;gap:8px;padding:6px 14px;font-size:12px;font-family:'JetBrains Mono',monospace;color:var(--text-secondary);cursor:pointer;transition:all .1s}
+.ctx-item:hover{background:rgba(0,84,230,.1);color:var(--text-primary)}
+.ctx-item.disabled{opacity:.3;pointer-events:none}
+.ctx-sep{height:1px;background:var(--surface-600);margin:4px 0}
+.ctx-shortcut{margin-left:auto;font-size:10px;color:var(--text-muted)}
+
+@keyframes pulse-close{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
+.sh{position:absolute;width:8px;height:8px;background:#0054e6;border:1px solid #fff;border-radius:1px;pointer-events:auto;z-index:6}
+.sel-box{position:absolute;border:1.5px solid var(--accent);background:rgba(0,84,230,0.05);pointer-events:none;z-index:5}
+.sel-handle{position:absolute;width:8px;height:8px;background:var(--accent);border:1px solid #fff;border-radius:1px;z-index:6;cursor:pointer}
+
+/* Properties Panel (slide-in from right) */
+.props-panel{position:absolute;top:0;right:0;width:240px;height:100%;background:var(--surface-800);border-left:1px solid var(--surface-600);z-index:10;display:none;flex-direction:column;overflow-y:auto}
+.props-panel.visible{display:flex}
+.pp-header{padding:10px 14px;font-size:11px;font-weight:700;font-family:'JetBrains Mono',monospace;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--surface-600);display:flex;justify-content:space-between;align-items:center}
+.pp-close{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:16px;line-height:1}
+.pp-close:hover{color:var(--text-secondary)}
+.pp-section{padding:10px 14px;border-bottom:1px solid var(--surface-600)}
+.pp-section-title{font-size:10px;font-family:'JetBrains Mono',monospace;color:var(--text-muted);text-transform:uppercase;margin-bottom:8px;letter-spacing:.05em}
+.pp-row{display:flex;align-items:center;gap:6px;margin-bottom:6px}
+.pp-label{font-size:11px;font-family:'JetBrains Mono',monospace;color:var(--text-muted);width:24px;flex-shrink:0}
+.pp-input{flex:1;background:var(--surface-600);border:1px solid transparent;color:var(--text-secondary);padding:4px 6px;border-radius:5px;font-family:'JetBrains Mono',monospace;font-size:11px;height:26px}
+.pp-input:focus{border-color:var(--accent);outline:none}
+.pp-color{width:26px;height:26px;border-radius:5px;border:1px solid var(--surface-600);cursor:pointer;padding:0;flex-shrink:0}
+
+/* Layers Panel */
+.layer-panel{position:absolute;top:0;right:0;width:220px;height:100%;background:var(--surface-800);border-left:1px solid var(--surface-600);z-index:10;display:none;flex-direction:column}
+.layer-panel.visible{display:flex}
+.lp-header{padding:8px 12px;font-size:11px;font-weight:700;font-family:'JetBrains Mono',monospace;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--surface-600);display:flex;justify-content:space-between;align-items:center}
+.lp-actions{display:flex;gap:2px}
+.lp-act{width:24px;height:24px;border:none;border-radius:5px;background:transparent;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all .1s}
+.lp-act:hover{color:var(--text-secondary);background:rgba(255,255,255,.05)}
+.lp-list{flex:1;overflow-y:auto;scrollbar-width:thin}
+.lp-item{display:flex;align-items:center;gap:6px;padding:6px 10px;font-size:11px;font-family:'JetBrains Mono',monospace;color:var(--text-secondary);cursor:pointer;border-bottom:1px solid rgba(255,255,255,.03);transition:background .1s}
+.lp-item:hover{background:rgba(255,255,255,.03)}
+.lp-item.selected{background:var(--accent-bg);color:var(--accent)}
+.lp-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.lp-btn{width:20px;height:20px;border:none;border-radius:4px;background:transparent;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .1s}
+.lp-btn:hover{color:var(--text-secondary);background:rgba(255,255,255,.05)}
+
+/* Status Bar */
+.statusbar{height:28px;background:var(--surface-800);border-top:1px solid var(--surface-600);display:flex;align-items:center;padding:0 12px;gap:16px;flex-shrink:0;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text-secondary)}
+.statusbar span{white-space:nowrap}
+.status-accent{color:var(--accent)}
+
+/* AI Modal */
+.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:200;display:none;align-items:center;justify-content:center}
+.modal-overlay.visible{display:flex}
+.modal{background:var(--surface-700);border:1px solid var(--surface-600);border-radius:12px;padding:24px;width:560px;max-width:90vw;max-height:85vh;overflow-y:auto}
+.modal h3{font-size:16px;color:var(--text-primary);margin-bottom:16px;font-weight:600}
+.modal-row{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
+.modal-row input,.modal-row select{background:var(--surface-600);border:1px solid transparent;color:var(--text-secondary);padding:6px 10px;border-radius:6px;font-size:12px}
+.modal-row input:focus,.modal-row select:focus{border-color:var(--accent);outline:none}
+.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
+.modal-actions button{padding:6px 16px;border-radius:6px;border:1px solid var(--surface-600);background:transparent;color:var(--text-secondary);cursor:pointer;font-size:12px;font-weight:500;transition:all .15s}
+.modal-actions button:hover{border-color:var(--text-muted)}
+.modal-actions button.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
+.modal-actions button.primary:hover{background:var(--accent-dim)}
+.icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px;max-height:280px;overflow-y:auto;padding:4px 0}
+.icon-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border-radius:8px;border:1px solid transparent;cursor:pointer;transition:all .12s}
+.icon-card:hover{border-color:var(--surface-600);background:rgba(255,255,255,.03)}
+.icon-card.selected{border-color:var(--accent);background:var(--accent-bg)}
+.icon-card span{font-size:9px;font-family:'JetBrains Mono',monospace;color:var(--text-muted);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}
+
+/* Dropzone for SVG import */
+.dropzone{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10;cursor:pointer;transition:background .2s}
+.dropzone:hover{background:rgba(0,84,230,0.03)}
+.dropzone.drag-over{background:rgba(0,84,230,0.06);border:2px dashed var(--accent)}
+.dropzone.hidden{display:none}
+.dropzone-icon{width:64px;height:64px;border-radius:16px;background:var(--surface-700);border:2px dashed var(--surface-600);display:flex;align-items:center;justify-content:center;margin-bottom:16px;transition:all .3s}
+.dropzone:hover .dropzone-icon{border-color:var(--accent);background:var(--accent-bg)}
+.dropzone-icon svg{color:var(--text-muted);width:28px;height:28px}
+.dropzone-text{font-size:15px;color:var(--text-secondary);margin-bottom:6px;font-weight:500}
+.dropzone-hint{font-size:12px;color:var(--text-muted)}
+</style>
+</head>
+<body>
+
+<!-- Editor -->
+<div class="editor-wrap">
+    <!-- Toolbar -->
+    <div class="toolbar">
+        <div class="toolbar-group">
+            <button class="tb" id="btnNew" title="Новый холст (Ctrl+N)"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/></svg></button>
+            <button class="tb" id="btnImport" title="Импорт SVG (Ctrl+O)"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 00-1.883 2.542l.857 6a2.25 2.25 0 002.227 1.932H19.05a2.25 2.25 0 002.227-1.932l.857-6a2.25 2.25 0 00-1.883-2.542m-16.5 0V6A2.25 2.25 0 016 3.75h3.879a1.5 1.5 0 011.06.44l2.122 2.12a1.5 1.5 0 001.06.44H18A2.25 2.25 0 0120.25 9v.776"/></svg></button>
+            <button class="tb" id="btnExportSvg" title="Экспорт SVG (Ctrl+S)"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/></svg></button>
+            <button class="tb" id="btnExportPng" title="Экспорт PNG"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0023.25 18.75V5.25A2.25 2.25 0 0021 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z"/></svg></button>
+        </div>
+        <div class="toolbar-sep"></div>
+
+        <!-- Drawing tools -->
+        <div class="toolbar-group" id="toolsGroup">
+            <button class="tb active" data-tool="select" title="Выделение (V)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.042 21.672L13.684 16.6m0 0l-2.51 2.225.569-9.47 5.227 7.917-3.286-.672zM12 2.25V4.5m5.834.166l-1.591 1.591M20.25 10.5H18M7.757 14.743l-1.59 1.59M6 10.5H3.75m4.007-4.243l-1.59-1.59"/></svg></button>
+            <button class="tb" data-tool="rect" title="Прямоугольник (R)"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
+            <button class="tb" data-tool="circle" title="Эллипс (O)"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><ellipse cx="12" cy="12" rx="9" ry="9"/></svg></button>
+            <button class="tb" data-tool="line" title="Линия (L)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><line x1="5" y1="19" x2="19" y2="5" stroke-linecap="round"/></svg></button>
+            <button class="tb" data-tool="path" title="Перо (P)"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 00-5.78 1.128 2.25 2.25 0 01-2.4 2.245 4.5 4.5 0 008.4-2.245c0-.399-.078-.78-.22-1.128zm0 0a15.998 15.998 0 003.388-1.62m-5.043-.025a15.994 15.994 0 011.622-3.395m3.42 3.42a15.995 15.995 0 004.764-4.648l3.876-5.814a1.151 1.151 0 00-1.597-1.597L14.146 6.32a15.996 15.996 0 00-4.649 4.763m3.42 3.42a6.776 6.776 0 00-3.42-3.42"/></svg></button>
+            <button class="tb" data-tool="text" title="Текст (T)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M7 4h10M12 4v16m-4 0h8"/></svg></button>
+        </div>
+        <div class="toolbar-sep"></div>
+
+        <!-- Transform -->
+        <div class="toolbar-group">
+            <button class="tb" id="btnFront" title="На передний план"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 19.5v-15m0 0l-6.75 6.75M12 4.5l6.75 6.75"/></svg></button>
+            <button class="tb" id="btnBack" title="На задний план"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m0 0l6.75-6.75M12 19.5l-6.75-6.75"/></svg></button>
+            <button class="tb" id="btnDuplicate" title="Дублировать (Ctrl+D)"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75"/><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 3h9.75a1.125 1.125 0 011.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125H8.25a1.125 1.125 0 01-1.125-1.125v-9.75c0-.621.504-1.125 1.125-1.125z"/></svg></button>
+            <button class="tb" id="btnDelete" title="Удалить (Del)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/></svg></button>
+            <button class="tb" id="btnRasterize" title="Текст → контур (path)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0023.25 18.75V5.25A2.25 2.25 0 0021 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z"/></svg></button>
+        <button class="tb" id="btnOptimize" title="Оптимизировать SVG"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z"/></svg></button>
+        </div>
+        <div class="toolbar-sep"></div>
+
+        <!-- Align -->
+        <div class="toolbar-group">
+            <button class="tb" id="btnAlignL" title="Выровнять по левому краю"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><line x1="4" y1="3" x2="4" y2="21"/><rect x="7" y="5" width="13" height="4" rx="1"/><rect x="7" y="13" width="8" height="4" rx="1"/></svg></button>
+            <button class="tb" id="btnAlignCX" title="Выровнять по центру (гориз.)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><line x1="12" y1="3" x2="12" y2="21" stroke-dasharray="2 2"/><rect x="5" y="5" width="14" height="4" rx="1"/><rect x="7" y="13" width="10" height="4" rx="1"/></svg></button>
+            <button class="tb" id="btnAlignR" title="Выровнять по правому краю"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><line x1="20" y1="3" x2="20" y2="21"/><rect x="4" y="5" width="13" height="4" rx="1"/><rect x="9" y="13" width="8" height="4" rx="1"/></svg></button>
+            <button class="tb" id="btnAlignT" title="Выровнять по верхнему краю"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><line x1="3" y1="4" x2="21" y2="4"/><rect x="5" y="7" width="4" height="13" rx="1"/><rect x="13" y="7" width="4" height="8" rx="1"/></svg></button>
+            <button class="tb" id="btnAlignCY" title="Выровнять по центру (верт.)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><line x1="3" y1="12" x2="21" y2="12" stroke-dasharray="2 2"/><rect x="5" y="5" width="4" height="14" rx="1"/><rect x="13" y="7" width="4" height="10" rx="1"/></svg></button>
+            <button class="tb" id="btnAlignB" title="Выровнять по нижнему краю"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><line x1="3" y1="20" x2="21" y2="20"/><rect x="5" y="4" width="4" height="13" rx="1"/><rect x="13" y="9" width="4" height="8" rx="1"/></svg></button>
+        </div>
+        <div class="toolbar-sep"></div>
+
+        <!-- Undo/Redo -->
+        <div class="toolbar-group">
+            <button class="tb" id="btnUndo" title="Отменить (Ctrl+Z)"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3"/></svg></button>
+            <button class="tb" id="btnRedo" title="Повторить (Ctrl+Shift+Z)"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 15l6-6m0 0l-6-6m6 6H9a6 6 0 000 12h3"/></svg></button>
+        </div>
+
+        <!-- Right side -->
+        <div class="toolbar-right">
+            <button class="tb" id="btnDevMode" title="SVG Код"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"/></svg></button>
+            <button class="tb" id="btnAI" title="AI Генератор иконок"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.455 2.456L21.75 6l-1.036.259a3.375 3.375 0 00-2.455 2.456z"/></svg></button>
+            <button class="tb" id="btnProps" title="Свойства"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75"/></svg></button>
+            <button class="tb" id="btnLayers" title="Слои"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2.25l9.75 5.25L12 12.75 2.25 7.5 12 2.25z"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l9.75 5.25L21.75 12"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 16.5l9.75 5.25 9.75-5.25"/></svg></button>
+            <div class="toolbar-sep"></div>
+            <div class="color-swatch" id="fillSwatch" title="Заливка">
+                <input type="color" id="fillColor" value="#0054e6">
+            </div>
+            <div class="color-swatch" id="strokeSwatch" title="Обводка">
+                <input type="color" id="strokeColor" value="#333333">
+            </div>
+            <div class="toolbar-sep"></div>
+            <button class="tb" id="btnZoomOut" title="Zoom Out"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607zM13.5 10.5h-6"/></svg></button>
+            <span id="zoomLabel" style="font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-muted);min-width:40px;text-align:center">100%</span>
+            <button class="tb" id="btnZoomIn" title="Zoom In"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607zM10.5 7.5v6m3-3h-6"/></svg></button>
+            <button class="tb" id="btnFit" title="По размеру (Ctrl+0)"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m9 0h4.5v4.5m0 9v4.5h-4.5m-9 0H3.75v-4.5"/></svg></button>
+        </div>
+    </div>
+
+    <!-- Tool Options (context-sensitive) -->
+    <div class="tool-options" id="toolOptions"></div>
+
+    <!-- Tab Bar -->
+    <div class="tab-bar" id="tabBar"></div>
+
+    <!-- Viewport -->
+    <div class="viewport" id="viewport">
+        <svg id="svgCanvas" xmlns="http://www.w3.org/2000/svg" width="800" height="600" viewBox="0 0 800 600" ></svg>
+
+        <!-- Pen points preview -->
+        <div id="penPoints" style="display:none;position:absolute;pointer-events:none;z-index:4"></div>
+
+        <!-- Context Menu -->
+        <div class="ctx-menu" id="ctxMenu">
+            <div class="ctx-item" data-action="copy">Копировать<span class="ctx-shortcut">Ctrl+C</span></div>
+            <div class="ctx-item" data-action="cut">Вырезать<span class="ctx-shortcut">Ctrl+X</span></div>
+            <div class="ctx-item" data-action="paste">Вставить<span class="ctx-shortcut">Ctrl+V</span></div>
+            <div class="ctx-sep"></div>
+            <div class="ctx-item" data-action="duplicate">Дублировать<span class="ctx-shortcut">Ctrl+D</span></div>
+            <div class="ctx-item" data-action="delete">Удалить<span class="ctx-shortcut">Del</span></div>
+            <div class="ctx-sep"></div>
+            <div class="ctx-item" data-action="front">На передний план</div>
+            <div class="ctx-item" data-action="back">На задний план</div>
+            <div class="ctx-sep"></div>
+            <div class="ctx-item" data-action="group">Группировать<span class="ctx-shortcut">Ctrl+G</span></div>
+            <div class="ctx-item" data-action="ungroup">Разгруппировать<span class="ctx-shortcut">Ctrl+Shift+G</span></div>
+            <div class="ctx-sep"></div>
+            <div class="ctx-item" data-action="rasterize">Текст → контур</div>
+        </div>
+
+        <!-- Marquee selection -->
+        <div id="marquee" style="display:none;position:absolute;border:1.5px dashed #0054e6;background:rgba(0,84,230,0.08);pointer-events:none;z-index:4;border-radius:2px"></div>
+
+        <!-- Inline text editor -->
+        <div class="text-edit-overlay" id="textEditOverlay"><textarea class="text-edit-input" id="textEditInput"></textarea></div>
+
+        <!-- Selection handles -->
+        <div id="selHandles" style="display:none;position:absolute;pointer-events:none;z-index:5">
+            <div style="position:absolute;inset:-1px;border:1.5px solid #0054e6;pointer-events:none"></div>
+            <div class="sh" data-h="nw" style="top:-4px;left:-4px;cursor:nw-resize"></div>
+            <div class="sh" data-h="n" style="top:-4px;left:50%;margin-left:-4px;cursor:n-resize"></div>
+            <div class="sh" data-h="ne" style="top:-4px;right:-4px;cursor:ne-resize"></div>
+            <div class="sh" data-h="e" style="top:50%;margin-top:-4px;right:-4px;cursor:e-resize"></div>
+            <div class="sh" data-h="se" style="bottom:-4px;right:-4px;cursor:se-resize"></div>
+            <div class="sh" data-h="s" style="bottom:-4px;left:50%;margin-left:-4px;cursor:s-resize"></div>
+            <div class="sh" data-h="sw" style="bottom:-4px;left:-4px;cursor:sw-resize"></div>
+            <div class="sh" data-h="w" style="top:50%;margin-top:-4px;left:-4px;cursor:w-resize"></div>
+        </div>
+
+        <!-- Drop zone -->
+        <div class="dropzone hidden" id="dropzone">
+            <div class="dropzone-icon">
+                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 00-5.78 1.128 2.25 2.25 0 01-2.4 2.245 4.5 4.5 0 008.4-2.245c0-.399-.078-.78-.22-1.128zm0 0a15.998 15.998 0 003.388-1.62m-5.043-.025a15.994 15.994 0 011.622-3.395m3.42 3.42a15.995 15.995 0 004.764-4.648l3.876-5.814a1.151 1.151 0 00-1.597-1.597L14.146 6.32a15.996 15.996 0 00-4.649 4.763m3.42 3.42a6.776 6.776 0 00-3.42-3.42"/></svg>
+            </div>
+            <div class="dropzone-text">Начните рисовать или импортируйте SVG</div>
+            <div class="dropzone-hint">Выберите инструмент / Ctrl+O / Drag & Drop</div>
+        </div>
+
+        <!-- Properties Panel -->
+        <div class="props-panel" id="propsPanel">
+            <div class="pp-header"><span>Свойства</span><button class="pp-close" id="propsClose">&times;</button></div>
+            <div id="propsBody"></div>
+        </div>
+
+        <!-- Layers Panel -->
+        <div class="layer-panel" id="layerPanel">
+            <div class="lp-header">
+                <span>Слои</span>
+                <div class="lp-actions">
+                    <button class="lp-act" id="lpClear" title="Очистить">&times;</button>
+                </div>
+            </div>
+            <div class="lp-list" id="layerList"></div>
+            <div class="lp-add-layer" id="lpAddLayer">+ Новый слой</div>
+        </div>
+    </div>
+
+    <!-- Status Bar -->
+    <div class="statusbar">
+        <span id="stSize">800 × 600</span>
+        <span id="stZoom" class="status-accent">100%</span>
+        <span id="stCoords">0, 0</span>
+        <span id="stCount">0 элементов</span>
+        <span id="stStatus" style="margin-left:auto">Готово</span>
+    </div>
+</div>
+
+<!-- AI Modal -->
+<div class="modal-overlay" id="aiModal">
+    <div class="modal">
+        <h3>AI Генератор иконок</h3>
+        <div class="modal-row">
+            <input id="aiSearch" type="text" style="flex:1;min-width:150px" placeholder="Поиск: home, star, user...">
+            <select id="aiStyle" style="width:100px"><option value="outline">Контур</option><option value="filled">Заливка</option><option value="duotone">Дуотон</option></select>
+            <select id="aiSize" style="width:70px"><option value="24">24</option><option value="32">32</option><option value="48" selected>48</option><option value="64">64</option><option value="128">128</option></select>
+            <input id="aiColor" type="color" value="#0054e6" style="width:34px;height:34px;border-radius:6px;border:1px solid var(--surface-600);cursor:pointer;padding:0">
+        </div>
+        <div class="icon-grid" id="aiGrid"></div>
+        <div class="modal-actions">
+            <button id="aiCancel">Отмена</button>
+            <button class="primary" id="aiAdd">Добавить на холст</button>
+        </div>
+    </div>
+</div>
+
+
+<!-- New Canvas Modal -->
+<div class="modal-overlay" id="newModal">
+    <div class="modal" style="width:340px">
+        <h3>Новый холст</h3>
+        <div class="modal-row">
+            <label style="width:60px;font-size:12px;color:var(--text-muted)">Ширина</label>
+            <input id="newW" type="number" value="800" min="100" max="4000" style="flex:1">
+            <span style="font-size:11px;color:var(--text-muted)">px</span>
+        </div>
+        <div class="modal-row">
+            <label style="width:60px;font-size:12px;color:var(--text-muted)">Высота</label>
+            <input id="newH" type="number" value="600" min="100" max="4000" style="flex:1">
+            <span style="font-size:11px;color:var(--text-muted)">px</span>
+        </div>
+        <div style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px">
+            <button class="opt-btn" onclick="document.getElementById('newW').value=1920;document.getElementById('newH').value=1080">1920×1080</button>
+            <button class="opt-btn" onclick="document.getElementById('newW').value=1080;document.getElementById('newH').value=1080">1080×1080</button>
+            <button class="opt-btn" onclick="document.getElementById('newW').value=800;document.getElementById('newH').value=600">800×600</button>
+            <button class="opt-btn" onclick="document.getElementById('newW').value=512;document.getElementById('newH').value=512">512×512</button>
+            <button class="opt-btn" onclick="document.getElementById('newW').value=24;document.getElementById('newH').value=24">24×24</button>
+            <button class="opt-btn" onclick="document.getElementById('newW').value=48;document.getElementById('newH').value=48">48×48</button>
+        </div>
+        <div class="modal-actions">
+            <button id="newCancel">Отмена</button>
+            <button class="primary" id="newCreate">Создать</button>
+        </div>
+    </div>
+</div>
+
+
+<!-- Dev Mode Modal -->
+<div class="modal-overlay" id="devModal">
+    <div class="modal" style="width:700px;max-height:90vh">
+        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px">
+            <h3 style="margin:0">SVG Код</h3>
+            <div style="display:flex;gap:6px">
+                <button class="opt-btn" id="devCopy">Копировать</button>
+                <button class="opt-btn" id="devClose">&times;</button>
+            </div>
+        </div>
+        <textarea id="devCode" style="width:100%;height:60vh;background:var(--surface-600);border:1px solid var(--surface-600);color:var(--text-secondary);font-family:'JetBrains Mono',monospace;font-size:11px;padding:12px;border-radius:8px;resize:none;outline:none;tab-size:2" spellcheck="false"></textarea>
+    </div>
+</div>
+
+<input type="file" id="importFile" accept=".svg" style="display:none">
+
+<script>
+(function(){
+    const svg = document.getElementById('svgCanvas');
+    const viewport = document.getElementById('viewport');
+    const dropzone = document.getElementById('dropzone');
+    let currentTool = 'select';
+    let selectedEl = null;
+    let history = [], historyIdx = -1;
+    const MAX_HISTORY = 30;
+    let drawing = false, startX, startY, tempEl = null, pathPoints = [];
+    let zoom = 1, panX = 0, panY = 0;
+    let panning = false, panStartX, panStartY;
+    let fillCol = '#0054e6', strokeCol = '#333333', strokeW = 2;
+
+    // ── Position SVG ──
+    function positionCanvas() {
+        const vw = viewport.clientWidth, vh = viewport.clientHeight;
+        const cw = 800 * zoom, ch = 600 * zoom;
+        const x = Math.max(0, (vw - cw) / 2) + panX;
+        const y = Math.max(0, (vh - ch) / 2) + panY;
+        svg.style.left = x + 'px';
+        svg.style.top = y + 'px';
+        svg.style.width = cw + 'px';
+        svg.style.height = ch + 'px';
+    }
+    positionCanvas();
+    window.addEventListener('resize', () => { positionCanvas(); showHandles(); });
+
+    // ── Zoom ──
+    function setZoom(z) {
+        zoom = Math.max(0.1, Math.min(10, z));
+        positionCanvas();
+        const pct = Math.round(zoom * 100) + '%';
+        document.getElementById('zoomLabel').textContent = pct;
+        document.getElementById('stZoom').textContent = pct;
+        if (selectedEl) showHandles();
+    }
+    document.getElementById('btnZoomIn').addEventListener('click', () => setZoom(zoom * 1.25));
+    document.getElementById('btnZoomOut').addEventListener('click', () => setZoom(zoom / 1.25));
+    document.getElementById('btnFit').addEventListener('click', () => { panX = 0; panY = 0; setZoom(Math.min(viewport.clientWidth / 840, viewport.clientHeight / 640)); });
+    viewport.addEventListener('wheel', (e) => { e.preventDefault(); setZoom(zoom * (e.deltaY < 0 ? 1.08 : 0.92)); }, { passive: false });
+
+    // ── Pan (Space + drag) ──
+    document.addEventListener('keydown', (e) => {
+        if (e.code === 'Space' && !e.repeat && document.activeElement.tagName !== 'INPUT') {
+            e.preventDefault(); svg.style.cursor = 'grab';
+        }
+    });
+    document.addEventListener('keyup', (e) => {
+        if (e.code === 'Space') { svg.style.cursor = currentTool === 'select' ? 'default' : 'crosshair'; }
+    });
+    viewport.addEventListener('mousedown', (e) => {
+        // Only pan on middle-click, space+click, or click on empty viewport area
+        const onCanvas = svg.contains(e.target) || e.target === svg;
+        const spaceHeld = e.getModifierState && e.getModifierState('Space');
+        if (e.button === 1 || (e.button === 0 && spaceHeld) || (e.button === 0 && e.target === viewport)) {
+            panning = true; panStartX = e.clientX - panX; panStartY = e.clientY - panY;
+            svg.style.cursor = 'grabbing'; e.preventDefault();
+        }
+    });
+    viewport.addEventListener('mousemove', (e) => {
+        if (panning) { panX = e.clientX - panStartX; panY = e.clientY - panStartY; positionCanvas(); if (selectedEl) showHandles(); return; }
+        // Update coords
+        try {
+            const pos = getMousePos(e);
+            if (isFinite(pos.x) && isFinite(pos.y)) {
+                document.getElementById('stCoords').textContent = `${Math.round(pos.x)}, ${Math.round(pos.y)}`;
+            }
+        } catch(ex) {}
+    });
+    viewport.addEventListener('mouseup', () => {
+        if (panning) { panning = false; svg.style.cursor = currentTool === 'select' ? 'default' : 'crosshair'; }
+    });
+
+    // ── History ──
+    function pushHistory() {
+        historyIdx++;
+        history = history.slice(0, historyIdx);
+        history.push(svg.innerHTML);
+        if (history.length > MAX_HISTORY) { history.shift(); historyIdx--; }
+        updateLayers();
+        updateCount();
+        if (dropzone && svg.children.length > 0) dropzone.classList.add('hidden');
+    }
+    function undo() { if (historyIdx > 0) { historyIdx--; svg.innerHTML = history[historyIdx]; selectedEl = null; updateProps(); updateLayers(); updateCount(); } }
+    function redo() { if (historyIdx < history.length - 1) { historyIdx++; svg.innerHTML = history[historyIdx]; selectedEl = null; updateProps(); updateLayers(); updateCount(); } }
+    function updateCount() {
+        let count = 0;
+        svg.querySelectorAll('g[data-layer]').forEach(l => { count += l.children.length; });
+        document.getElementById('stCount').textContent = count + ' элементов';
+    }
+    // ── Layer System ──
+    let activeLayer = null;
+
+    function initLayers() {
+        if (!svg.querySelector('g[data-layer]')) {
+            const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+            g.setAttribute('data-layer', 'true');
+            g.setAttribute('data-name', 'Слой 1');
+            // Move existing children into the layer
+            while (svg.firstChild) g.appendChild(svg.firstChild);
+            svg.appendChild(g);
+        }
+        activeLayer = svg.querySelector('g[data-layer]');
+    }
+    initLayers();
+
+    function isLayerLocked(layer) {
+        return layer && layer.getAttribute('data-locked') === '1';
+    }
+
+    function getActiveLayer() {
+        if (!activeLayer || !svg.contains(activeLayer)) {
+            activeLayer = svg.querySelector('g[data-layer]');
+            if (!activeLayer) {
+                const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+                g.setAttribute('data-layer', 'true');
+                g.setAttribute('data-name', 'Слой 1');
+                svg.appendChild(g);
+                activeLayer = g;
+            }
+        }
+        return activeLayer;
+    }
+
+    function addLayer(name) {
+        const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+        g.setAttribute('data-layer', 'true');
+        g.setAttribute('data-name', name || 'Слой ' + (svg.querySelectorAll('g[data-layer]').length + 1));
+        svg.appendChild(g);
+        activeLayer = g;
+        pushHistory();
+        updateLayers();
+        return g;
+    }
+
+    pushHistory();
+
+    // ── Tools ──
+    document.querySelectorAll('#toolsGroup .tb').forEach(btn => {
+        btn.addEventListener('click', () => {
+            currentTool = btn.dataset.tool;
+            document.querySelectorAll('#toolsGroup .tb').forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+            svg.style.cursor = currentTool === 'select' ? 'default' : 'crosshair';
+            pathPoints = []; if (typeof hidePenPoints === 'function') hidePenPoints();
+            updateToolOptions();
+        });
+    });
+
+    // ── Tool Options ──
+    let noFill = false, noStroke = false, fillOpacity = 1;
+
+    function updateToolOptions() {
+        const bar = document.getElementById('toolOptions');
+        if (currentTool === 'rect' || currentTool === 'circle' || currentTool === 'line' || currentTool === 'path') {
+            bar.innerHTML = `
+                <label>Заливка:</label>
+                <input type="color" id="optFill" value="${fillCol}" style="width:26px;height:26px;border-radius:5px;border:1px solid var(--surface-600);cursor:pointer;padding:0" ${noFill?'disabled':''}>
+                <button class="opt-btn ${noFill?'':'primary'}" id="optNoFill" style="font-size:10px;padding:2px 6px" title="Без заливки">${noFill?'✗':'✓'}</button>
+                <div class="opt-sep"></div>
+                <label>Непр.:</label>
+                <input type="range" id="optFillOp" min="0" max="1" step="0.05" value="${fillOpacity}" style="width:60px">
+                <span id="optFillOpVal" style="font-size:10px;color:var(--text-muted);min-width:28px">${Math.round(fillOpacity*100)}%</span>
+                <div class="opt-sep"></div>
+                <label>Обводка:</label>
+                <input type="color" id="optStroke" value="${strokeCol}" style="width:26px;height:26px;border-radius:5px;border:1px solid var(--surface-600);cursor:pointer;padding:0" ${noStroke?'disabled':''}>
+                <button class="opt-btn ${noStroke?'':'primary'}" id="optNoStroke" style="font-size:10px;padding:2px 6px" title="Без обводки">${noStroke?'✗':'✓'}</button>
+                <div class="opt-sep"></div>
+                <label>Толщина:</label>
+                <input type="number" id="optStrokeW" value="${strokeW}" min="0" max="50" step="0.5" ${noStroke?'disabled':''}>
+            `;
+            bar.classList.add('visible');
+            document.getElementById('optFill').addEventListener('input', (e) => { fillCol = e.target.value; document.getElementById('fillColor').value = fillCol; applyToSelected(); });
+            document.getElementById('optStroke').addEventListener('input', (e) => { strokeCol = e.target.value; document.getElementById('strokeColor').value = strokeCol; applyToSelected(); });
+            document.getElementById('optStrokeW').addEventListener('input', (e) => { strokeW = parseFloat(e.target.value) || 0; applyToSelected(); });
+            document.getElementById('optFillOp').addEventListener('input', (e) => {
+                fillOpacity = parseFloat(e.target.value);
+                document.getElementById('optFillOpVal').textContent = Math.round(fillOpacity*100)+'%';
+                applyToSelected();
+            });
+            document.getElementById('optNoFill').addEventListener('click', () => { noFill = !noFill; updateToolOptions(); applyToSelected(); });
+            document.getElementById('optNoStroke').addEventListener('click', () => { noStroke = !noStroke; updateToolOptions(); applyToSelected(); });
+        } else if (currentTool === 'text') {
+            bar.innerHTML = `
+                <label>Размер:</label><input type="number" id="optFontSize" value="20" min="6" max="400" style="width:50px">
+                <div class="opt-sep"></div>
+                <label>Шрифт:</label><select id="optFontFamily" style="width:120px">
+                    <option value="Manrope, sans-serif">Manrope</option>
+                    <option value="'JetBrains Mono', monospace">JetBrains Mono</option>
+                    <option value="Arial, sans-serif">Arial</option>
+                    <option value="Georgia, serif">Georgia</option>
+                    <option value="'Times New Roman', serif">Times New Roman</option>
+                    <option value="'Courier New', monospace">Courier New</option>
+                    <option value="Verdana, sans-serif">Verdana</option>
+                    <option value="Impact, sans-serif">Impact</option>
+                </select>
+                <div class="opt-sep"></div>
+                <label>Цвет:</label><input type="color" id="optTextColor" value="${fillCol}" style="width:26px;height:26px;border-radius:5px;border:1px solid var(--surface-600);cursor:pointer;padding:0">
+                <div class="opt-sep"></div>
+                <label>Межбукв.:</label><input type="number" id="optLetterSpacing" value="0" min="-5" max="20" step="0.5" style="width:50px">
+                <div class="opt-sep"></div>
+                <label>Жирный:</label><select id="optFontWeight" style="width:70px">
+                    <option value="400">400</option>
+                    <option value="500">500</option>
+                    <option value="600">600</option>
+                    <option value="700" selected>700</option>
+                    <option value="800">800</option>
+                    <option value="900">900</option>
+                </select>
+            `;
+            bar.classList.add('visible');
+        } else if (currentTool === 'select' && selectedEl) {
+            // Show selected element options
+            const tag = selectedEl.tagName;
+            if (tag === 'rect' || tag === 'ellipse' || tag === 'line' || tag === 'path') {
+                const elFill = selectedEl.getAttribute('fill') || 'none';
+                const elStroke = selectedEl.getAttribute('stroke') || 'none';
+                const elSW = selectedEl.getAttribute('stroke-width') || '2';
+                const elOp = selectedEl.getAttribute('fill-opacity') || '1';
+                const isNoFill = elFill === 'none';
+                const isNoStroke = elStroke === 'none';
+                bar.innerHTML = `
+                    <label>Заливка:</label>
+                    <input type="color" id="optFill" value="${isNoFill?'#000000':elFill}" style="width:26px;height:26px;border-radius:5px;border:1px solid var(--surface-600);cursor:pointer;padding:0" ${isNoFill?'disabled':''}>
+                    <button class="opt-btn ${isNoFill?'':'primary'}" id="optNoFill" style="font-size:10px;padding:2px 6px">${isNoFill?'✗':'✓'}</button>
+                    <div class="opt-sep"></div>
+                    <label>Непр.:</label>
+                    <input type="range" id="optFillOp" min="0" max="1" step="0.05" value="${elOp}" style="width:60px">
+                    <span id="optFillOpVal" style="font-size:10px;color:var(--text-muted);min-width:28px">${Math.round(parseFloat(elOp)*100)}%</span>
+                    <div class="opt-sep"></div>
+                    <label>Обводка:</label>
+                    <input type="color" id="optStroke" value="${isNoStroke?'#000000':elStroke}" style="width:26px;height:26px;border-radius:5px;border:1px solid var(--surface-600);cursor:pointer;padding:0" ${isNoStroke?'disabled':''}>
+                    <button class="opt-btn ${isNoStroke?'':'primary'}" id="optNoStroke" style="font-size:10px;padding:2px 6px">${isNoStroke?'✗':'✓'}</button>
+                    <div class="opt-sep"></div>
+                    <label>Толщина:</label>
+                    <input type="number" id="optStrokeW" value="${elSW}" min="0" max="50" step="0.5" ${isNoStroke?'disabled':''}>
+                `;
+                bar.classList.add('visible');
+                document.getElementById('optFill').addEventListener('input', (e) => { selectedEl.setAttribute('fill', e.target.value); });
+                document.getElementById('optStroke').addEventListener('input', (e) => { selectedEl.setAttribute('stroke', e.target.value); });
+                document.getElementById('optStrokeW').addEventListener('input', (e) => { selectedEl.setAttribute('stroke-width', e.target.value); });
+                document.getElementById('optFillOp').addEventListener('input', (e) => {
+                    selectedEl.setAttribute('fill-opacity', e.target.value);
+                    document.getElementById('optFillOpVal').textContent = Math.round(parseFloat(e.target.value)*100)+'%';
+                });
+                document.getElementById('optNoFill').addEventListener('click', () => {
+                    const cur = selectedEl.getAttribute('fill');
+                    if (cur === 'none') { selectedEl.setAttribute('fill', fillCol); } else { selectedEl.setAttribute('fill', 'none'); }
+                    pushHistory(); updateToolOptions();
+                });
+                document.getElementById('optNoStroke').addEventListener('click', () => {
+                    const cur = selectedEl.getAttribute('stroke');
+                    if (cur === 'none') { selectedEl.setAttribute('stroke', strokeCol); selectedEl.setAttribute('stroke-width', strokeW); } else { selectedEl.setAttribute('stroke', 'none'); }
+                    pushHistory(); updateToolOptions();
+                });
+            } else if (tag === 'text') {
+                const elFS = selectedEl.getAttribute('font-size') || '20';
+                const elFF = selectedEl.getAttribute('font-family') || 'Manrope, sans-serif';
+                const elFill = selectedEl.getAttribute('fill') || '#000';
+                const elLS = selectedEl.getAttribute('letter-spacing') || '0';
+                const elFW = selectedEl.getAttribute('font-weight') || '400';
+                bar.innerHTML = `
+                    <label>Размер:</label><input type="number" id="optFontSize" value="${elFS}" min="6" max="400" style="width:50px">
+                    <div class="opt-sep"></div>
+                    <label>Шрифт:</label><select id="optFontFamily" style="width:120px">
+                        <option value="Manrope, sans-serif" ${elFF.includes('Manrope')?'selected':''}>Manrope</option>
+                        <option value="'JetBrains Mono', monospace" ${elFF.includes('JetBrains')?'selected':''}>JetBrains Mono</option>
+                        <option value="Arial, sans-serif" ${elFF.includes('Arial')?'selected':''}>Arial</option>
+                        <option value="Georgia, serif" ${elFF.includes('Georgia')?'selected':''}>Georgia</option>
+                        <option value="'Times New Roman', serif" ${elFF.includes('Times')?'selected':''}>Times New Roman</option>
+                        <option value="'Courier New', monospace" ${elFF.includes('Courier')?'selected':''}>Courier New</option>
+                        <option value="Verdana, sans-serif" ${elFF.includes('Verdana')?'selected':''}>Verdana</option>
+                        <option value="Impact, sans-serif" ${elFF.includes('Impact')?'selected':''}>Impact</option>
+                    </select>
+                    <div class="opt-sep"></div>
+                    <label>Цвет:</label><input type="color" id="optTextColor" value="${elFill}" style="width:26px;height:26px;border-radius:5px;border:1px solid var(--surface-600);cursor:pointer;padding:0">
+                    <div class="opt-sep"></div>
+                    <label>Межбукв.:</label><input type="number" id="optLetterSpacing" value="${elLS}" min="-5" max="20" step="0.5" style="width:50px">
+                    <div class="opt-sep"></div>
+                    <label>Жирность:</label><select id="optFontWeight" style="width:70px">
+                        <option value="400" ${elFW==='400'?'selected':''}>400</option>
+                        <option value="500" ${elFW==='500'?'selected':''}>500</option>
+                        <option value="600" ${elFW==='600'?'selected':''}>600</option>
+                        <option value="700" ${elFW==='700'?'selected':''}>700</option>
+                        <option value="800" ${elFW==='800'?'selected':''}>800</option>
+                        <option value="900" ${elFW==='900'?'selected':''}>900</option>
+                    </select>
+                `;
+                bar.classList.add('visible');
+                document.getElementById('optFontSize').addEventListener('input', (e) => { selectedEl.setAttribute('font-size', e.target.value); showHandles(); });
+                document.getElementById('optFontFamily').addEventListener('change', (e) => { selectedEl.setAttribute('font-family', e.target.value); showHandles(); });
+                document.getElementById('optTextColor').addEventListener('input', (e) => { selectedEl.setAttribute('fill', e.target.value); });
+                document.getElementById('optLetterSpacing').addEventListener('input', (e) => { selectedEl.setAttribute('letter-spacing', e.target.value); showHandles(); });
+                document.getElementById('optFontWeight').addEventListener('change', (e) => { selectedEl.setAttribute('font-weight', e.target.value); showHandles(); });
+            } else {
+                bar.innerHTML = '';
+                bar.classList.remove('visible');
+            }
+        } else {
+            bar.innerHTML = '';
+            bar.classList.remove('visible');
+        }
+    }
+
+    function applyToSelected() {
+        if (!selectedEl) return;
+        const tag = selectedEl.tagName;
+        if (tag === 'rect' || tag === 'ellipse' || tag === 'line' || tag === 'path') {
+            selectedEl.setAttribute('fill', noFill ? 'none' : fillCol);
+            selectedEl.setAttribute('fill-opacity', fillOpacity);
+            selectedEl.setAttribute('stroke', noStroke ? 'none' : strokeCol);
+            selectedEl.setAttribute('stroke-width', strokeW);
+            pushHistory();
+        }
+    }
+
+    // ── SVG Helpers ──
+    function svgEl(tag, attrs) {
+        const el = document.createElementNS('http://www.w3.org/2000/svg', tag);
+        for (const [k, v] of Object.entries(attrs)) el.setAttribute(k, v);
+        return el;
+    }
+    function getMousePos(e) {
+        const rect = svg.getBoundingClientRect();
+        return { x: (e.clientX - rect.left) / zoom, y: (e.clientY - rect.top) / zoom };
+    }
+
+    // ── Drawing ──
+
+
+    // Pen tool point markers
+    const penPointsDiv = document.getElementById('penPoints');
+    function showPenPoints() {
+        if (pathPoints.length === 0) { hidePenPoints(); return; }
+        const svgRect = svg.getBoundingClientRect();
+        const vpRect = viewport.getBoundingClientRect();
+        const ox = svgRect.left - vpRect.left;
+        const oy = svgRect.top - vpRect.top;
+        let html = '';
+        pathPoints.forEach((p, i) => {
+            const isFirst = i === 0;
+            const closable = isFirst && pathPoints.length > 2;
+            const sz = closable ? 14 : 8;
+            const off = closable ? 7 : 4;
+            const style = `position:absolute;left:${ox + p.x * zoom - off}px;top:${oy + p.y * zoom - off}px;width:${sz}px;height:${sz}px;border-radius:${isFirst?'50%':'1px'};background:${isFirst?'#ff5252':'#0054e6'};border:${closable?'2':'1'}px solid #fff;z-index:5;${closable ? 'cursor:pointer;pointer-events:auto;box-shadow:0 0 8px rgba(255,82,82,.5);' : ''}transition:transform .15s;${closable ? 'animation:pulse-close 1s infinite;' : ''}`;
+            html += '<div style="' + style + '" ' + (isFirst ? 'title="Замкнуть контур"' : '') + '></div>';
+        });
+        penPointsDiv.style.display = 'block';
+        penPointsDiv.innerHTML = html;
+    }
+    function hidePenPoints() {
+        penPointsDiv.style.display = 'none';
+        penPointsDiv.innerHTML = '';
+    }
+
+    // Find nearest SVG element within tolerance (for thin lines etc)
+    function findNearestElement(px, py, tolerance) {
+        let best = null, bestDist = tolerance;
+        const svgR = svg.getBoundingClientRect();
+        // Search all elements in all layers
+        const allEls = [];
+        svg.querySelectorAll('g[data-layer]').forEach(layer => {
+            if (layer.getAttribute('visibility') === 'hidden') return;
+            Array.from(layer.children).forEach(el => allEls.push(el));
+        });
+        allEls.forEach(el => {
+            if (el.getAttribute('visibility') === 'hidden') return;
+            let dist = Infinity;
+            try {
+                // Use visual bounds (accounts for transforms)
+                const elR = el.getBoundingClientRect();
+                if (elR.width === 0 && elR.height === 0) return;
+                // Convert element visual bounds to SVG coords
+                const vx = (elR.left - svgR.left) / zoom;
+                const vy = (elR.top - svgR.top) / zoom;
+                const vw = elR.width / zoom;
+                const vh = elR.height / zoom;
+                if (px >= vx && px <= vx + vw && py >= vy && py <= vy + vh) {
+                    dist = 0;
+                } else {
+                    const cx = Math.max(vx, Math.min(px, vx + vw));
+                    const cy = Math.max(vy, Math.min(py, vy + vh));
+                    dist = Math.hypot(px - cx, py - cy);
+                }
+            } catch(ex) { return; }
+            if (dist < bestDist) { bestDist = dist; best = el; }
+        });
+        return best;
+    }
+    function pointToSegDist(px, py, x1, y1, x2, y2) {
+        const dx = x2 - x1, dy = y2 - y1;
+        const lenSq = dx * dx + dy * dy;
+        if (lenSq === 0) return Math.hypot(px - x1, py - y1);
+        let t = ((px - x1) * dx + (py - y1) * dy) / lenSq;
+        t = Math.max(0, Math.min(1, t));
+        return Math.hypot(px - (x1 + t * dx), py - (y1 + t * dy));
+    }
+    function distToBBox(px, py, bb) {
+        const cx = Math.max(bb.x, Math.min(px, bb.x + bb.width));
+        const cy = Math.max(bb.y, Math.min(py, bb.y + bb.height));
+        return Math.hypot(px - cx, py - cy);
+    }
+
+    svg.addEventListener('mousedown', (e) => {
+        if (e.button !== 0 || panning) return;
+        const pos = getMousePos(e);
+        startX = pos.x; startY = pos.y;
+
+        if (currentTool === 'select') {
+            // Hide handles to avoid hitting them
+            const hVis = selHandles.style.display;
+            const lhVis = lineHandles.style.display;
+            selHandles.style.display = 'none';
+            lineHandles.style.display = 'none';
+            let target = document.elementFromPoint(e.clientX, e.clientY);
+            selHandles.style.display = hVis;
+            lineHandles.style.display = lhVis;
+
+            // Walk up to direct child of layer (stop at layer <g>)
+            if (target && target !== svg && svg.contains(target)) {
+                while (target.parentElement && target.parentElement.getAttribute &&
+                       !target.parentElement.getAttribute('data-layer') &&
+                       target.parentElement !== svg) {
+                    target = target.parentElement;
+                }
+            }
+
+            // If elementFromPoint missed but we already have a selected element,
+            // check if click is within its visual bounds → re-use it for drag
+            if ((!target || target === svg) && selectedEl) {
+                const selR = selectedEl.getBoundingClientRect();
+                if (e.clientX >= selR.left - 5 && e.clientX <= selR.right + 5 &&
+                    e.clientY >= selR.top - 5 && e.clientY <= selR.bottom + 5) {
+                    target = selectedEl;
+                }
+            }
+
+            if (target && target !== svg && svg.contains(target)) {
+                // Direct hit on element → select & start drag
+                selectElement(target);
+                drawing = true;
+                const tag = selectedEl.tagName;
+                let ox, oy;
+                if (tag === 'rect' || tag === 'text' || tag === 'image') {
+                    ox = parseFloat(selectedEl.getAttribute('x') || 0);
+                    oy = parseFloat(selectedEl.getAttribute('y') || 0);
+                } else if (tag === 'ellipse' || tag === 'circle') {
+                    ox = parseFloat(selectedEl.getAttribute('cx') || 0);
+                    oy = parseFloat(selectedEl.getAttribute('cy') || 0);
+                } else if (tag === 'line') {
+                    ox = parseFloat(selectedEl.getAttribute('x1') || 0);
+                    oy = parseFloat(selectedEl.getAttribute('y1') || 0);
+                } else {
+                    ox = 0; oy = 0;
+                    const t = selectedEl.getAttribute('transform') || '';
+                    const m = t.match(/translate\(\s*([^,)\s]+)\s*,?\s*([^)\s]*)/);
+                    if (m) { ox = parseFloat(m[1]) || 0; oy = parseFloat(m[2]) || 0; }
+                }
+                selectedEl._drag = { x: startX, y: startY, ox, oy };
+                if (selectedEl.tagName === 'line') {
+                    selectedEl._drag.ox2 = parseFloat(selectedEl.getAttribute('x2'));
+                    selectedEl._drag.oy2 = parseFloat(selectedEl.getAttribute('y2'));
+                }
+            } else {
+                // Empty space → start marquee (proximity check deferred to mouseup)
+                deselectAll();
+                drawing = true;
+                tempEl = null;
+                selectedEl = null;
+                const marquee = document.getElementById('marquee');
+                marquee._start = { x: e.clientX, y: e.clientY, sx: pos.x, sy: pos.y };
+                marquee.style.display = 'block';
+                const vpR = viewport.getBoundingClientRect();
+                marquee.style.left = (e.clientX - vpR.left) + 'px';
+                marquee.style.top = (e.clientY - vpR.top) + 'px';
+                marquee.style.width = '0px';
+                marquee.style.height = '0px';
+            }
+            return;
+        }
+        if (currentTool === 'text') {
+            const text = prompt('Введите текст:');
+            if (text) {
+                const fs = document.getElementById('optFontSize')?.value || 20;
+                const col = document.getElementById('optTextColor')?.value || fillCol;
+                const ff = document.getElementById('optFontFamily')?.value || 'Manrope, sans-serif';
+                const ls = document.getElementById('optLetterSpacing')?.value || 0;
+                const fw = document.getElementById('optFontWeight')?.value || 700;
+                const el = svgEl('text', { x: pos.x, y: pos.y, fill: col, 'font-size': fs, 'font-family': ff, 'font-weight': fw, 'letter-spacing': ls, 'data-name': 'Текст' });
+                el.textContent = text;
+                getActiveLayer().appendChild(el); pushHistory(); selectElement(el);
+            }
+            return;
+        }
+        if (currentTool === 'path') {
+            // Check if clicking near first point to close path
+            if (pathPoints.length > 2) {
+                const fp = pathPoints[0];
+                const dist = Math.hypot(pos.x - fp.x, pos.y - fp.y);
+                if (dist < 20) {
+                    // Close the path
+                    let d = `M${pathPoints[0].x},${pathPoints[0].y}`;
+                    for (let i = 1; i < pathPoints.length; i++) d += ` L${pathPoints[i].x},${pathPoints[i].y}`;
+                    d += ' Z';
+                    tempEl.setAttribute('d', d);
+                    tempEl.setAttribute('fill', noFill ? 'none' : fillCol);
+                    tempEl.setAttribute('fill-opacity', fillOpacity);
+                    pushHistory();
+                    const drawnPath = tempEl; tempEl = null; pathPoints = [];
+                    hidePenPoints();
+                    currentTool = 'select';
+                    document.querySelectorAll('#toolsGroup .tb').forEach(b => b.classList.remove('active'));
+                    document.querySelector('[data-tool="select"]').classList.add('active');
+                    svg.style.cursor = 'default';
+                    updateToolOptions();
+                    selectElement(drawnPath);
+                    return;
+                }
+            }
+
+            pathPoints.push(pos);
+            if (pathPoints.length === 1) {
+                tempEl = svgEl('path', { d: `M${pos.x},${pos.y}`, fill: 'none', stroke: noStroke ? '#333' : strokeCol, 'stroke-width': strokeW, 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'data-name': 'Путь' });
+                getActiveLayer().appendChild(tempEl);
+            } else {
+                let d = `M${pathPoints[0].x},${pathPoints[0].y}`;
+                for (let i = 1; i < pathPoints.length; i++) d += ` L${pathPoints[i].x},${pathPoints[i].y}`;
+                tempEl.setAttribute('d', d);
+            }
+            showPenPoints();
+            return;
+        }
+        drawing = true;
+        const f = (currentTool === 'line' || noFill) ? 'none' : fillCol;
+        const fOpacity = (currentTool === 'line') ? '1' : '0.15';
+        if (currentTool === 'rect') {
+            tempEl = svgEl('rect', { x: pos.x, y: pos.y, width: 0, height: 0, fill: f, 'fill-opacity': fOpacity, stroke: strokeCol, 'stroke-width': strokeW, rx: '0', 'data-name': 'Прямоугольник' });
+        } else if (currentTool === 'circle') {
+            tempEl = svgEl('ellipse', { cx: pos.x, cy: pos.y, rx: 0, ry: 0, fill: f, 'fill-opacity': fOpacity, stroke: strokeCol, 'stroke-width': strokeW, 'data-name': 'Эллипс' });
+        } else if (currentTool === 'line') {
+            tempEl = svgEl('line', { x1: pos.x, y1: pos.y, x2: pos.x, y2: pos.y, stroke: strokeCol, 'stroke-width': strokeW, 'stroke-linecap': 'round', 'data-name': 'Линия' });
+        }
+        if (tempEl) getActiveLayer().appendChild(tempEl);
+    });
+
+    document.addEventListener('mousemove', (e) => {
+        if (panning) return;
+        // Handle select+drag separately (tempEl is null during drag)
+        // Marquee selection drag
+        const marquee = document.getElementById('marquee');
+        if (drawing && currentTool === 'select' && !selectedEl && marquee._start) {
+            const ms = marquee._start;
+            const vpRect = viewport.getBoundingClientRect();
+            const cx = e.clientX, cy = e.clientY;
+            const left = Math.min(ms.x, cx) - vpRect.left;
+            const top = Math.min(ms.y, cy) - vpRect.top;
+            const w = Math.abs(cx - ms.x);
+            const h = Math.abs(cy - ms.y);
+            marquee.style.left = left + 'px';
+            marquee.style.top = top + 'px';
+            marquee.style.width = w + 'px';
+            marquee.style.height = h + 'px';
+            return;
+        }
+        if (drawing && currentTool === 'select' && selectedEl?._drag) {
+            const pos = getMousePos(e);
+            const d = selectedEl._drag, ddx = pos.x - d.x, ddy = pos.y - d.y, tag = selectedEl.tagName;
+            if (tag === 'rect' || tag === 'text' || tag === 'image') { selectedEl.setAttribute('x', d.ox + ddx); selectedEl.setAttribute('y', d.oy + ddy); }
+            else if (tag === 'ellipse' || tag === 'circle') { selectedEl.setAttribute('cx', d.ox + ddx); selectedEl.setAttribute('cy', d.oy + ddy); }
+            else if (tag === 'line') { selectedEl.setAttribute('x1', d.ox + ddx); selectedEl.setAttribute('y1', d.oy + ddy); selectedEl.setAttribute('x2', d.ox2 + ddx); selectedEl.setAttribute('y2', d.oy2 + ddy); }
+            else {
+                const origT = selectedEl.getAttribute('transform') || '';
+                const rest = origT.replace(/translate\([^)]*\)/, '').trim();
+                selectedEl.setAttribute('transform', `translate(${d.ox + ddx},${d.oy + ddy}) ${rest}`.trim());
+            }
+            showHandles();
+            return;
+        }
+        if (!drawing || !tempEl) return;
+        const pos = getMousePos(e);
+        const dx = pos.x - startX, dy = pos.y - startY;
+        const shift = e.shiftKey;
+        if (false && currentTool === 'select' && selectedEl?._drag) {
+            const d = selectedEl._drag, ddx = pos.x - d.x, ddy = pos.y - d.y, tag = selectedEl.tagName;
+            if (tag === 'rect' || tag === 'text' || tag === 'image') { selectedEl.setAttribute('x', d.ox + ddx); selectedEl.setAttribute('y', d.oy + ddy); }
+            else if (tag === 'ellipse' || tag === 'circle') { selectedEl.setAttribute('cx', d.ox + ddx); selectedEl.setAttribute('cy', d.oy + ddy); }
+            else if (tag === 'line') { selectedEl.setAttribute('x1', d.ox + ddx); selectedEl.setAttribute('y1', d.oy + ddy); selectedEl.setAttribute('x2', d.ox2 + ddx); selectedEl.setAttribute('y2', d.oy2 + ddy); }
+            else {
+                const origT = selectedEl.getAttribute('transform') || '';
+                const rest = origT.replace(/translate\([^)]*\)/, '').trim();
+                selectedEl.setAttribute('transform', `translate(${d.ox + ddx},${d.oy + ddy}) ${rest}`.trim());
+            }
+            showHandles();
+            return;
+        }
+        if (currentTool === 'rect') {
+            const w = shift ? Math.max(Math.abs(dx), Math.abs(dy)) : Math.abs(dx);
+            const h = shift ? w : Math.abs(dy);
+            tempEl.setAttribute('x', dx < 0 ? startX - w : startX); tempEl.setAttribute('y', dy < 0 ? startY - h : startY);
+            tempEl.setAttribute('width', w); tempEl.setAttribute('height', h);
+        } else if (currentTool === 'circle') {
+            const rx = shift ? Math.max(Math.abs(dx), Math.abs(dy)) / 2 : Math.abs(dx) / 2;
+            const ry = shift ? rx : Math.abs(dy) / 2;
+            tempEl.setAttribute('cx', startX + dx / 2); tempEl.setAttribute('cy', startY + dy / 2);
+            tempEl.setAttribute('rx', rx); tempEl.setAttribute('ry', ry);
+        } else if (currentTool === 'line') {
+            if (shift) {
+                const angle = Math.atan2(dy, dx), snap = Math.round(angle / (Math.PI / 4)) * (Math.PI / 4), len = Math.sqrt(dx * dx + dy * dy);
+                tempEl.setAttribute('x2', startX + Math.cos(snap) * len); tempEl.setAttribute('y2', startY + Math.sin(snap) * len);
+            } else { tempEl.setAttribute('x2', pos.x); tempEl.setAttribute('y2', pos.y); }
+        }
+    });
+
+    document.addEventListener('mouseup', () => {
+        if (!drawing) return;
+        drawing = false;
+        // Marquee selection end
+        const mq = document.getElementById('marquee');
+        if (currentTool === 'select' && !selectedEl && mq._start) {
+            const ms = mq._start;
+            const pos2 = getMousePos({ clientX: mq._start.x, clientY: mq._start.y });
+            // Compute marquee rect in SVG coords
+            const mx1 = Math.min(ms.sx, getMousePos({ clientX: parseInt(mq.style.left) + viewport.getBoundingClientRect().left, clientY: 0 }).x);
+            const svgR = svg.getBoundingClientRect();
+            const vpR = viewport.getBoundingClientRect();
+            const mqLeft = parseFloat(mq.style.left);
+            const mqTop = parseFloat(mq.style.top);
+            const mqW = parseFloat(mq.style.width);
+            const mqH = parseFloat(mq.style.height);
+            // Convert marquee screen rect to SVG coords
+            const sx1 = (mqLeft + vpR.left - svgR.left) / zoom;
+            const sy1 = (mqTop + vpR.top - svgR.top) / zoom;
+            const sx2 = sx1 + mqW / zoom;
+            const sy2 = sy1 + mqH / zoom;
+
+            mq.style.display = 'none';
+            delete mq._start;
+
+            if (mqW > 5 || mqH > 5) {
+                // Find topmost element within marquee using visual bounds
+                let best = null;
+                Array.from(svg.children).forEach(el => {
+                    if (el.getAttribute('visibility') === 'hidden') return;
+                    try {
+                        const elR = el.getBoundingClientRect();
+                        const vpR2 = viewport.getBoundingClientRect();
+                        const elL = elR.left - vpR2.left;
+                        const elT = elR.top - vpR2.top;
+                        const elR2 = elL + elR.width;
+                        const elB = elT + elR.height;
+                        // Marquee bounds in viewport coords
+                        if (elL < mqLeft + mqW && elR2 > mqLeft && elT < mqTop + mqH && elB > mqTop) {
+                            best = el; // last = topmost
+                        }
+                    } catch(e) {}
+                });
+                if (best) selectElement(best);
+            } else {
+                // Tiny marquee = click on empty space, try proximity for thin elements
+                const nearPos = getMousePos({ clientX: ms.x, clientY: ms.y });
+                const near = findNearestElement(nearPos.x, nearPos.y, 12);
+                if (near) selectElement(near);
+            }
+            return;
+        }
+        if (currentTool === 'select' && selectedEl) { delete selectedEl._drag; pushHistory(); updateProps(); showHandles(); return; }
+        if (tempEl && currentTool !== 'select') {
+            const w = parseFloat(tempEl.getAttribute('width') || tempEl.getAttribute('rx') || 0);
+            const h = parseFloat(tempEl.getAttribute('height') || tempEl.getAttribute('ry') || 0);
+            if (currentTool === 'line') {
+                const x1 = parseFloat(tempEl.getAttribute('x1')), y1 = parseFloat(tempEl.getAttribute('y1'));
+                const x2 = parseFloat(tempEl.getAttribute('x2')), y2 = parseFloat(tempEl.getAttribute('y2'));
+                if (Math.abs(x2 - x1) < 2 && Math.abs(y2 - y1) < 2) { tempEl.remove(); tempEl = null; return; }
+            } else if (w < 2 && h < 2) { tempEl.remove(); tempEl = null; return; }
+            tempEl.setAttribute('fill-opacity', noFill ? '0' : String(fillOpacity));
+            if (noStroke) tempEl.setAttribute('stroke', 'none');
+            pushHistory();
+            // Auto-switch to select and select the drawn element
+            const drawnEl = tempEl; tempEl = null;
+            currentTool = 'select';
+            document.querySelectorAll('#toolsGroup .tb').forEach(b => b.classList.remove('active'));
+            document.querySelector('[data-tool="select"]').classList.add('active');
+            svg.style.cursor = 'default';
+            updateToolOptions();
+            selectElement(drawnEl);
+        }
+    });
+
+    svg.addEventListener('dblclick', (e) => {
+        // Inline text edit on double-click
+        if (currentTool === 'select' && selectedEl && selectedEl.tagName === 'text') {
+            startTextEdit(selectedEl);
+            return;
+        }
+        if (currentTool === 'path' && pathPoints.length > 1) {
+            // Double-click finishes path (open, no close)
+            tempEl.setAttribute('fill', noFill ? 'none' : fillCol);
+            tempEl.setAttribute('fill-opacity', noFill ? '0' : String(fillOpacity));
+            pushHistory();
+            const drawnPath = tempEl; tempEl = null; pathPoints = [];
+            hidePenPoints();
+            currentTool = 'select';
+            document.querySelectorAll('#toolsGroup .tb').forEach(b => b.classList.remove('active'));
+            document.querySelector('[data-tool="select"]').classList.add('active');
+            svg.style.cursor = 'default';
+            updateToolOptions();
+            selectElement(drawnPath);
+        }
+    });
+
+    // ── Selection ──
+    const selHandles = document.getElementById('selHandles');
+    let resizing = false, resizeHandle = '', resizeStart = {};
+
+    function selectElement(el) {
+        deselectAll();
+        selectedEl = el;
+        // Defer showHandles to next frame so layout recalculates after toolOptions change
+        updateProps(); updateLayers(); updateToolOptions();
+        document.getElementById('propsPanel').classList.add('visible');
+        document.getElementById('layerPanel').classList.remove('visible');
+        requestAnimationFrame(() => showHandles());
+    }
+    function deselectAll() {
+        selectedEl = null;
+        selHandles.style.display = 'none';
+        lineHandles.style.display = 'none';
+        document.getElementById('propsPanel').classList.remove('visible');
+        const mqEl = document.getElementById('marquee');
+        if (mqEl) { mqEl.style.display = 'none'; delete mqEl._start; }
+        updateProps(); updateLayers();
+    }
+    // Line endpoint handles
+    const lineHandles = document.createElement('div');
+    lineHandles.id = 'lineHandles';
+    lineHandles.style.cssText = 'display:none;position:absolute;pointer-events:none;z-index:5';
+    lineHandles.innerHTML = '<div class="sh" data-lh="1" style="pointer-events:auto;cursor:move"></div><div class="sh" data-lh="2" style="pointer-events:auto;cursor:move"></div>';
+    viewport.appendChild(lineHandles);
+
+    // Line endpoint drag
+    lineHandles.querySelectorAll('.sh').forEach(h => {
+        h.addEventListener('mousedown', (e) => {
+            e.stopPropagation();
+            if (!selectedEl || selectedEl.tagName !== 'line') return;
+            resizing = true;
+            resizeHandle = h.dataset.lh;
+            resizeStart = { x: e.clientX, y: e.clientY,
+                x1: parseFloat(selectedEl.getAttribute('x1')), y1: parseFloat(selectedEl.getAttribute('y1')),
+                x2: parseFloat(selectedEl.getAttribute('x2')), y2: parseFloat(selectedEl.getAttribute('y2'))
+            };
+            document.addEventListener('mousemove', onLineHandleDrag);
+            document.addEventListener('mouseup', onLineHandleDragEnd);
+        });
+    });
+    function onLineHandleDrag(e) {
+        if (!resizing || !selectedEl) return;
+        const dx = (e.clientX - resizeStart.x) / zoom;
+        const dy = (e.clientY - resizeStart.y) / zoom;
+        if (resizeHandle === '1') {
+            selectedEl.setAttribute('x1', resizeStart.x1 + dx);
+            selectedEl.setAttribute('y1', resizeStart.y1 + dy);
+        } else {
+            selectedEl.setAttribute('x2', resizeStart.x2 + dx);
+            selectedEl.setAttribute('y2', resizeStart.y2 + dy);
+        }
+        showHandles();
+    }
+    function onLineHandleDragEnd() {
+        resizing = false;
+        document.removeEventListener('mousemove', onLineHandleDrag);
+        document.removeEventListener('mouseup', onLineHandleDragEnd);
+        pushHistory(); updateProps();
+    }
+
+    function getVisualBBox(el) {
+        // Compute visual bbox using CTM (avoids layout timing issues)
+        const bb = el.getBBox();
+        const ctm = el.getCTM();
+        if (!ctm) {
+            const svgRect = svg.getBoundingClientRect();
+            const vpRect = viewport.getBoundingClientRect();
+            return { left: svgRect.left - vpRect.left + bb.x * zoom, top: svgRect.top - vpRect.top + bb.y * zoom, width: bb.width * zoom, height: bb.height * zoom };
+        }
+        // Transform all 4 corners of bbox through CTM
+        const pts = [
+            { x: bb.x, y: bb.y },
+            { x: bb.x + bb.width, y: bb.y },
+            { x: bb.x + bb.width, y: bb.y + bb.height },
+            { x: bb.x, y: bb.y + bb.height }
+        ];
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+        const svgCtm = svg.getScreenCTM();
+        const vpRect = viewport.getBoundingClientRect();
+        pts.forEach(p => {
+            const pt = svg.createSVGPoint();
+            pt.x = p.x; pt.y = p.y;
+            // Transform through element CTM to screen, then to viewport-relative
+            const screen = pt.matrixTransform(el.getScreenCTM());
+            const vx = screen.x - vpRect.left;
+            const vy = screen.y - vpRect.top;
+            minX = Math.min(minX, vx); minY = Math.min(minY, vy);
+            maxX = Math.max(maxX, vx); maxY = Math.max(maxY, vy);
+        });
+        return { left: minX, top: minY, width: maxX - minX, height: maxY - minY };
+    }
+
+    function showHandles() {
+        if (!selectedEl) { selHandles.style.display = 'none'; lineHandles.style.display = 'none'; return; }
+        const vpRect = viewport.getBoundingClientRect();
+        const svgRect = svg.getBoundingClientRect();
+        const ox = svgRect.left - vpRect.left;
+        const oy = svgRect.top - vpRect.top;
+
+        if (selectedEl.tagName === 'line') {
+            selHandles.style.display = 'none';
+            lineHandles.style.display = 'block';
+            // For lines, account for any transform
+            const ctm = selectedEl.getCTM();
+            const svgCtm = svg.getScreenCTM();
+            let x1 = parseFloat(selectedEl.getAttribute('x1'));
+            let y1 = parseFloat(selectedEl.getAttribute('y1'));
+            let x2 = parseFloat(selectedEl.getAttribute('x2'));
+            let y2 = parseFloat(selectedEl.getAttribute('y2'));
+            if (ctm && svgCtm) {
+                const inv = svgCtm.inverse();
+                // Transform through element CTM then to screen, then to viewport
+                const pt1 = svg.createSVGPoint(); pt1.x = x1; pt1.y = y1;
+                const pt2 = svg.createSVGPoint(); pt2.x = x2; pt2.y = y2;
+                const s1 = pt1.matrixTransform(ctm).matrixTransform(inv);
+                const s2 = pt2.matrixTransform(ctm).matrixTransform(inv);
+                x1 = s1.x; y1 = s1.y; x2 = s2.x; y2 = s2.y;
+            }
+            lineHandles.children[0].style.left = (ox + x1 * zoom - 4) + 'px';
+            lineHandles.children[0].style.top = (oy + y1 * zoom - 4) + 'px';
+            lineHandles.children[1].style.left = (ox + x2 * zoom - 4) + 'px';
+            lineHandles.children[1].style.top = (oy + y2 * zoom - 4) + 'px';
+            return;
+        }
+
+        lineHandles.style.display = 'none';
+
+        // Use visual bounding rect (includes transforms)
+        const vbb = getVisualBBox(selectedEl);
+        selHandles.style.display = 'block';
+        selHandles.style.left = vbb.left + 'px';
+        selHandles.style.top = vbb.top + 'px';
+        selHandles.style.width = vbb.width + 'px';
+        selHandles.style.height = vbb.height + 'px';
+    }
+
+    // Resize handles
+    selHandles.querySelectorAll('.sh').forEach(h => {
+        h.addEventListener('mousedown', (e) => {
+            e.stopPropagation();
+            if (!selectedEl) return;
+            resizing = true;
+            resizeHandle = h.dataset.h;
+            const tag = selectedEl.tagName;
+            if (tag === 'g' || tag === 'path' || tag === 'text') {
+                // Use visual bounds for transformed elements
+                const vbb = getVisualBBox(selectedEl);
+                const bb = selectedEl.getBBox();
+                resizeStart = {
+                    x: e.clientX, y: e.clientY,
+                    bx: bb.x, by: bb.y, bw: bb.width, bh: bb.height,
+                    vx: vbb.left, vy: vbb.top, vw: vbb.width, vh: vbb.height,
+                    origTransform: selectedEl.getAttribute('transform') || '',
+                    useVisual: true
+                };
+            } else {
+                const bb = selectedEl.getBBox();
+                resizeStart = { x: e.clientX, y: e.clientY, bx: bb.x, by: bb.y, bw: bb.width, bh: bb.height };
+            }
+            document.addEventListener('mousemove', onResize);
+            document.addEventListener('mouseup', onResizeEnd);
+        });
+    });
+    function onResize(e) {
+        if (!resizing || !selectedEl) return;
+        const dx = (e.clientX - resizeStart.x) / zoom;
+        const dy = (e.clientY - resizeStart.y) / zoom;
+        const s = resizeStart;
+        let nx = s.bx, ny = s.by, nw = s.bw, nh = s.bh;
+        const tag = selectedEl.tagName;
+
+        if (resizeHandle.includes('e')) nw = Math.max(2, s.bw + dx);
+        if (resizeHandle.includes('w')) { nx = s.bx + dx; nw = Math.max(2, s.bw - dx); }
+        if (resizeHandle.includes('s')) nh = Math.max(2, s.bh + dy);
+        if (resizeHandle.includes('n')) { ny = s.by + dy; nh = Math.max(2, s.bh - dy); }
+
+        // Shift = proportional
+        if (e.shiftKey && s.bw > 0 && s.bh > 0) {
+            const ratio = s.bw / s.bh;
+            if (resizeHandle === 'n' || resizeHandle === 's') { nw = nh * ratio; }
+            else if (resizeHandle === 'e' || resizeHandle === 'w') { nh = nw / ratio; }
+            else { const maxD = Math.max(Math.abs(nw - s.bw), Math.abs(nh - s.bh)); nw = s.bw + maxD * Math.sign(nw - s.bw || 1); nh = nw / ratio; }
+        }
+
+        if (tag === 'rect') {
+            selectedEl.setAttribute('x', nx); selectedEl.setAttribute('y', ny);
+            selectedEl.setAttribute('width', nw); selectedEl.setAttribute('height', nh);
+        } else if (tag === 'ellipse') {
+            selectedEl.setAttribute('cx', nx + nw / 2); selectedEl.setAttribute('cy', ny + nh / 2);
+            selectedEl.setAttribute('rx', nw / 2); selectedEl.setAttribute('ry', nh / 2);
+        } else if (tag === 'line') {
+            if (resizeHandle.includes('e') || resizeHandle.includes('s')) {
+                selectedEl.setAttribute('x2', parseFloat(selectedEl.getAttribute('x2')) + dx);
+                selectedEl.setAttribute('y2', parseFloat(selectedEl.getAttribute('y2')) + dy);
+            } else {
+                selectedEl.setAttribute('x1', parseFloat(selectedEl.getAttribute('x1')) + dx);
+                selectedEl.setAttribute('y1', parseFloat(selectedEl.getAttribute('y1')) + dy);
+            }
+        } else if (tag === 'text' || tag === 'g' || tag === 'path') {
+            if (!s.useVisual) return;
+            // Compute new visual size from handle drag (in screen pixels)
+            const dxPx = e.clientX - s.x;
+            const dyPx = e.clientY - s.y;
+            let newVW = s.vw, newVH = s.vh, newVX = s.vx, newVY = s.vy;
+
+            if (resizeHandle.includes('e')) newVW = Math.max(8, s.vw + dxPx);
+            if (resizeHandle.includes('w')) { newVX = s.vx + dxPx; newVW = Math.max(8, s.vw - dxPx); }
+            if (resizeHandle.includes('s')) newVH = Math.max(8, s.vh + dyPx);
+            if (resizeHandle.includes('n')) { newVY = s.vy + dyPx; newVH = Math.max(8, s.vh - dyPx); }
+
+            // Shift = proportional
+            if (e.shiftKey && s.vw > 0 && s.vh > 0) {
+                const ratio = s.vw / s.vh;
+                if (resizeHandle === 'n' || resizeHandle === 's') { newVW = newVH * ratio; }
+                else if (resizeHandle === 'e' || resizeHandle === 'w') { newVH = newVW / ratio; }
+                else { newVH = newVW / ratio; }
+            }
+
+            const scaleX = newVW / s.vw;
+            const scaleY = newVH / s.vh;
+
+            // Parse original transform to get existing translate and scale
+            const origT = s.origTransform;
+            const tm = origT.match(/translate\(\s*([^,)\s]+)\s*,?\s*([^)\s]*)\s*\)/);
+            const sm = origT.match(/scale\(\s*([^,)\s]+)\s*,?\s*([^)\s]*)\s*\)/);
+            const origTX = tm ? parseFloat(tm[1]) || 0 : 0;
+            const origTY = tm ? parseFloat(tm[2]) || 0 : 0;
+            const origSX = sm ? parseFloat(sm[1]) || 1 : 1;
+            const origSY = sm ? (parseFloat(sm[2]) || origSX) : origSX;
+
+            // New scale = original scale * ratio
+            const newSX = origSX * scaleX;
+            const newSY = origSY * scaleY;
+
+            // Adjust translate so the pinned corner stays in place
+            // The pinned corner is opposite to the drag handle
+            // For simplicity: compute offset needed
+            const vpR = document.getElementById('viewport').getBoundingClientRect();
+            const svgR = svg.getBoundingClientRect();
+            const pinnedVX = resizeHandle.includes('e') || resizeHandle.includes('s') ? s.vx : s.vx + s.vw;
+            const pinnedVY = resizeHandle.includes('e') || resizeHandle.includes('s') ? s.vy : s.vy + s.vh;
+            if (resizeHandle === 'n' || resizeHandle === 'w' || resizeHandle === 'nw') {
+                // Pin bottom-right
+            }
+
+            // Convert pinned visual point to SVG coords
+            const pinnedSvgX = (pinnedVX + vpR.left - svgR.left) / zoom;
+            const pinnedSvgY = (pinnedVY + vpR.top - svgR.top) / zoom;
+
+            // New translate: pin point - (local pin point * new scale)
+            // local pin point relative to bbox origin
+            let localPinX, localPinY;
+            if (resizeHandle.includes('w')) { localPinX = s.bx + s.bw; } else { localPinX = s.bx; }
+            if (resizeHandle.includes('n')) { localPinY = s.by + s.bh; } else { localPinY = s.by; }
+
+            const newTX = pinnedSvgX - localPinX * newSX;
+            const newTY = pinnedSvgY - localPinY * newSY;
+
+            selectedEl.setAttribute('transform', `translate(${newTX.toFixed(1)},${newTY.toFixed(1)}) scale(${newSX.toFixed(3)},${newSY.toFixed(3)})`);
+            showHandles();
+            return; // skip normal nx/ny logic
+        }
+        showHandles();
+    }
+    function onResizeEnd() {
+        if (resizing) {
+            resizing = false;
+            // For text: bake transform into font-size for cleaner SVG
+            if (selectedEl && selectedEl.tagName === 'text') {
+                const t = selectedEl.getAttribute('transform');
+                if (t) {
+                    const bb = selectedEl.getBBox();
+                    const m = svg.createSVGMatrix();
+                    // Extract scale from transform via getBBox comparison
+                    const ctm = selectedEl.getCTM();
+                    const parentCtm = svg.getCTM();
+                    if (ctm && parentCtm) {
+                        const relScale = ctm.a / parentCtm.a;
+                        const origFS = parseFloat(selectedEl.getAttribute('font-size') || 20);
+                        const newFS = Math.round(origFS * relScale * 10) / 10;
+                        // Get the transformed position
+                        const pt = svg.createSVGPoint();
+                        pt.x = parseFloat(selectedEl.getAttribute('x') || 0);
+                        pt.y = parseFloat(selectedEl.getAttribute('y') || 0);
+                        const tPt = pt.matrixTransform(ctm).matrixTransform(parentCtm.inverse());
+                        selectedEl.setAttribute('font-size', Math.max(6, newFS));
+                        selectedEl.setAttribute('x', Math.round(tPt.x * 10) / 10);
+                        selectedEl.setAttribute('y', Math.round(tPt.y * 10) / 10);
+                        selectedEl.removeAttribute('transform');
+                    }
+                }
+            }
+            pushHistory(); updateProps();
+        }
+        document.removeEventListener('mousemove', onResize);
+        document.removeEventListener('mouseup', onResizeEnd);
+    }
+
+    // ── Properties Panel ──
+    document.getElementById('btnProps').addEventListener('click', () => {
+        const p = document.getElementById('propsPanel');
+        p.classList.toggle('visible');
+        document.getElementById('layerPanel').classList.remove('visible');
+    });
+    document.getElementById('propsClose').addEventListener('click', () => document.getElementById('propsPanel').classList.remove('visible'));
+
+    function updateProps() {
+        const body = document.getElementById('propsBody');
+        if (!selectedEl) { body.innerHTML = '<div class="pp-section"><span style="font-size:11px;color:var(--text-muted);font-family:\'JetBrains Mono\',monospace">Выберите элемент</span></div>'; return; }
+        const tag = selectedEl.tagName;
+        let html = '<div class="pp-section"><div class="pp-section-title">Позиция</div>';
+        if (tag === 'rect' || tag === 'text') {
+            html += ppRow('X', 'ppX', selectedEl.getAttribute('x') || 0) + ppRow('Y', 'ppY', selectedEl.getAttribute('y') || 0);
+        } else if (tag === 'ellipse') {
+            html += ppRow('CX', 'ppX', selectedEl.getAttribute('cx') || 0) + ppRow('CY', 'ppY', selectedEl.getAttribute('cy') || 0);
+        } else if (tag === 'line') {
+            html += ppRow('X1', 'ppX', selectedEl.getAttribute('x1') || 0) + ppRow('Y1', 'ppY', selectedEl.getAttribute('y1') || 0);
+        }
+        html += '</div>';
+        if (tag === 'rect') { html += '<div class="pp-section"><div class="pp-section-title">Размер</div>' + ppRow('W', 'ppW', selectedEl.getAttribute('width') || 0) + ppRow('H', 'ppH', selectedEl.getAttribute('height') || 0) + '</div>'; }
+        else if (tag === 'ellipse') { html += '<div class="pp-section"><div class="pp-section-title">Размер</div>' + ppRow('RX', 'ppW', selectedEl.getAttribute('rx') || 0) + ppRow('RY', 'ppH', selectedEl.getAttribute('ry') || 0) + '</div>'; }
+        const fill = selectedEl.getAttribute('fill') || 'none';
+        const stroke = selectedEl.getAttribute('stroke') || 'none';
+        html += `<div class="pp-section"><div class="pp-section-title">Стиль</div>
+            <div class="pp-row"><span class="pp-label">Fill</span><input type="color" class="pp-color" id="ppFill" value="${fill === 'none' ? '#000000' : fill}"></div>
+            <div class="pp-row"><span class="pp-label">Str</span><input type="color" class="pp-color" id="ppStroke" value="${stroke === 'none' ? '#000000' : stroke}"></div>
+            ${ppRow('SW', 'ppSW', selectedEl.getAttribute('stroke-width') || 1)}
+            ${ppRow('Op', 'ppOp', selectedEl.getAttribute('opacity') || 1)}
+            </div>`;
+        if (tag === 'text') {
+            html += '<div class="pp-section"><div class="pp-section-title">Текст</div>';
+            html += ppRow('Sz', 'ppFS', selectedEl.getAttribute('font-size') || 16);
+            html += ppRow('LS', 'ppLS', selectedEl.getAttribute('letter-spacing') || 0);
+            html += ppRow('FW', 'ppFW', selectedEl.getAttribute('font-weight') || 400);
+            html += '</div>';
+        }
+        body.innerHTML = html;
+        body.querySelectorAll('.pp-input,.pp-color').forEach(input => input.addEventListener('change', () => applyProp(input)));
+    }
+    function ppRow(label, id, val) {
+        return `<div class="pp-row"><span class="pp-label">${label}</span><input class="pp-input" id="${id}" type="number" step="any" value="${parseFloat(val) || 0}"></div>`;
+    }
+    function applyProp(input) {
+        if (!selectedEl) return;
+        const id = input.id, val = input.value, tag = selectedEl.tagName;
+        if (id === 'ppX') selectedEl.setAttribute(tag === 'ellipse' ? 'cx' : tag === 'line' ? 'x1' : 'x', val);
+        else if (id === 'ppY') selectedEl.setAttribute(tag === 'ellipse' ? 'cy' : tag === 'line' ? 'y1' : 'y', val);
+        else if (id === 'ppW') selectedEl.setAttribute(tag === 'ellipse' ? 'rx' : 'width', val);
+        else if (id === 'ppH') selectedEl.setAttribute(tag === 'ellipse' ? 'ry' : 'height', val);
+        else if (id === 'ppFill') selectedEl.setAttribute('fill', val);
+        else if (id === 'ppStroke') selectedEl.setAttribute('stroke', val);
+        else if (id === 'ppSW') selectedEl.setAttribute('stroke-width', val);
+        else if (id === 'ppOp') selectedEl.setAttribute('opacity', val);
+        else if (id === 'ppFS') { selectedEl.setAttribute('font-size', val); showHandles(); }
+        else if (id === 'ppLS') { selectedEl.setAttribute('letter-spacing', val); showHandles(); }
+        else if (id === 'ppFW') { selectedEl.setAttribute('font-weight', val); showHandles(); }
+        pushHistory();
+    }
+
+    // ── Layers Panel ──
+    document.getElementById('btnLayers').addEventListener('click', () => {
+        const p = document.getElementById('layerPanel');
+        p.classList.toggle('visible');
+        document.getElementById('propsPanel').classList.remove('visible');
+    });
+    document.getElementById('lpClear').addEventListener('click', () => {
+        if (confirm('Очистить холст?')) {
+            svg.innerHTML = '';
+            activeLayer = null;
+            initLayers();
+            deselectAll();
+            pushHistory();
+        }
+    });
+    document.getElementById('lpAddLayer').addEventListener('click', () => {
+        addLayer();
+        document.getElementById('stStatus').textContent = 'Новый слой создан';
+    });
+
+    function updateLayers() {
+        const list = document.getElementById('layerList');
+        const layers = svg.querySelectorAll(':scope > g[data-layer]');
+        let html = '';
+
+        for (let li = layers.length - 1; li >= 0; li--) {
+            const layer = layers[li];
+            const layerName = layer.getAttribute('data-name') || 'Слой';
+            const isActive = layer === activeLayer;
+            const layerVis = layer.getAttribute('visibility') !== 'hidden';
+
+            html += '<div class="lp-layer ' + (isActive ? 'active' : '') + '" data-layer-idx="' + li + '">';
+            html += '<span class="lp-name">' + layerName + '</span>';
+            var layerLocked = layer.getAttribute('data-locked') === '1';
+            html += '<span class="lp-lock ' + (layerLocked ? 'locked' : '') + '" data-layer-lock="' + li + '" title="' + (layerLocked ? 'Разблокировать' : 'Заблокировать') + '">' + (layerLocked ? '🔒' : '🔓') + '</span>';
+            html += '<button class="lp-btn" data-layer-up="' + li + '" title="Выше" style="font-size:10px">↑</button>';
+            html += '<button class="lp-btn" data-layer-down="' + li + '" title="Ниже" style="font-size:10px">↓</button>';
+            html += '<button class="lp-btn" data-layer-vis="' + li + '" title="' + (layerVis ? 'Скрыть' : 'Показать') + '"><svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">' + (layerVis ? '<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/>' : '<line x1="1" y1="1" x2="23" y2="23"/>') + '</svg></button>';
+            html += '<button class="lp-btn" data-layer-del="' + li + '" title="Удалить слой"><svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>';
+            html += '</div>';
+
+            // Children of this layer
+            const children = Array.from(layer.children);
+            for (let ci = children.length - 1; ci >= 0; ci--) {
+                const el = children[ci];
+                if (el.getAttribute('data-layer')) continue;
+                const name = el.getAttribute('data-name') || el.tagName;
+                const isSel = el === selectedEl;
+                const isGroup = el.tagName === 'g';
+                const icon = isGroup ? '📁' : '◇';
+                html += '<div class="lp-child ' + (isSel ? 'selected' : '') + '" data-layer-idx="' + li + '" data-child-idx="' + ci + '">';
+                html += '<span style="font-size:10px;flex-shrink:0">' + icon + '</span>';
+                html += '<span class="lp-name">' + name + (isGroup ? ' (' + el.children.length + ')' : '') + '</span>';
+                html += '<button class="lp-btn" data-child-del="' + li + '-' + ci + '"><svg width="10" height="10" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>';
+                html += '</div>';
+            }
+        }
+
+        list.innerHTML = html;
+
+        // Layer click → set active
+        list.querySelectorAll('.lp-layer').forEach(el => {
+            el.addEventListener('click', (e) => {
+                if (e.target.closest('.lp-btn')) return;
+                const idx = parseInt(el.dataset.layerIdx);
+                activeLayer = layers[idx];
+                updateLayers();
+            });
+        });
+
+        // Layer visibility
+        list.querySelectorAll('[data-layer-vis]').forEach(btn => {
+            btn.addEventListener('click', () => {
+                const layer = layers[parseInt(btn.dataset.layerVis)];
+                layer.setAttribute('visibility', layer.getAttribute('visibility') === 'hidden' ? 'visible' : 'hidden');
+                updateLayers();
+            });
+        });
+
+        // Layer delete
+        list.querySelectorAll('[data-layer-del]').forEach(btn => {
+            btn.addEventListener('click', () => {
+                if (layers.length <= 1) return; // keep at least one
+                const layer = layers[parseInt(btn.dataset.layerDel)];
+                layer.remove();
+                if (layer === activeLayer) activeLayer = svg.querySelector('g[data-layer]');
+                if (selectedEl && !svg.contains(selectedEl)) deselectAll();
+                pushHistory();
+            });
+        });
+
+        // Layer lock
+        list.querySelectorAll('[data-layer-lock]').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                const layer = layers[parseInt(btn.dataset.layerLock)];
+                const locked = layer.getAttribute('data-locked') === '1';
+                layer.setAttribute('data-locked', locked ? '0' : '1');
+                if (!locked) layer.style.pointerEvents = 'none';
+                else layer.style.pointerEvents = '';
+                updateLayers();
+                document.getElementById('stStatus').textContent = locked ? 'Слой разблокирован' : 'Слой заблокирован';
+            });
+        });
+
+        // Layer reorder
+        list.querySelectorAll('[data-layer-up]').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                const idx = parseInt(btn.dataset.layerUp);
+                const layer = layers[idx];
+                if (layer.nextElementSibling) {
+                    layer.parentElement.insertBefore(layer.nextElementSibling, layer);
+                    pushHistory(); updateLayers();
+                }
+            });
+        });
+        list.querySelectorAll('[data-layer-down]').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                const idx = parseInt(btn.dataset.layerDown);
+                const layer = layers[idx];
+                if (layer.previousElementSibling) {
+                    layer.parentElement.insertBefore(layer, layer.previousElementSibling);
+                    pushHistory(); updateLayers();
+                }
+            });
+        });
+
+        // Child click → select
+        list.querySelectorAll('.lp-child').forEach(el => {
+            el.addEventListener('click', (e) => {
+                if (e.target.closest('.lp-btn')) return;
+                const li2 = parseInt(el.dataset.layerIdx);
+                const ci2 = parseInt(el.dataset.childIdx);
+                const child = layers[li2].children[ci2];
+                if (child) selectElement(child);
+            });
+        });
+
+        // Child delete
+        list.querySelectorAll('[data-child-del]').forEach(btn => {
+            btn.addEventListener('click', () => {
+                const [li2, ci2] = btn.dataset.childDel.split('-').map(Number);
+                const child = layers[li2].children[ci2];
+                if (child) { if (child === selectedEl) deselectAll(); child.remove(); pushHistory(); }
+            });
+        });
+    }
+
+    // ── Toolbar Actions ──
+    document.getElementById('btnUndo').addEventListener('click', undo);
+    document.getElementById('btnRedo').addEventListener('click', redo);
+    document.getElementById('btnDelete').addEventListener('click', () => { if (selectedEl) { selectedEl.remove(); deselectAll(); pushHistory(); } });
+    document.getElementById('btnDuplicate').addEventListener('click', () => {
+        if (!selectedEl) return;
+        const clone = selectedEl.cloneNode(true);
+        const tag = clone.tagName;
+        if (tag === 'rect' || tag === 'text') { clone.setAttribute('x', parseFloat(clone.getAttribute('x') || 0) + 20); clone.setAttribute('y', parseFloat(clone.getAttribute('y') || 0) + 20); }
+        else if (tag === 'ellipse') { clone.setAttribute('cx', parseFloat(clone.getAttribute('cx') || 0) + 20); clone.setAttribute('cy', parseFloat(clone.getAttribute('cy') || 0) + 20); }
+        else if (tag === 'line') { ['x1','y1','x2','y2'].forEach(a => clone.setAttribute(a, parseFloat(clone.getAttribute(a) || 0) + 20)); }
+        getActiveLayer().appendChild(clone); pushHistory(); selectElement(clone);
+    });
+    document.getElementById('btnFront').addEventListener('click', () => { if (selectedEl) { svg.appendChild(selectedEl); pushHistory(); updateLayers(); } });
+    document.getElementById('btnBack').addEventListener('click', () => { if (selectedEl && svg.firstChild !== selectedEl) { svg.insertBefore(selectedEl, svg.firstChild); pushHistory(); updateLayers(); } });
+
+    // Color swatches
+    document.getElementById('fillColor').addEventListener('input', (e) => { fillCol = e.target.value; if (selectedEl) { selectedEl.setAttribute('fill', fillCol); pushHistory(); } });
+    document.getElementById('strokeColor').addEventListener('input', (e) => { strokeCol = e.target.value; if (selectedEl) { selectedEl.setAttribute('stroke', strokeCol); pushHistory(); } });
+
+    // Import
+    document.getElementById('btnImport').addEventListener('click', () => document.getElementById('importFile').click());
+    document.getElementById('importFile').addEventListener('change', (e) => {
+        const file = e.target.files[0]; if (!file) return;
+        const reader = new FileReader();
+        reader.onload = () => {
+            const parser = new DOMParser();
+            const doc = parser.parseFromString(reader.result, 'image/svg+xml');
+            const imp = doc.querySelector('svg');
+            if (!imp) { alert('Не удалось разобрать SVG'); return; }
+            Array.from(imp.children).forEach(c => getActiveLayer().appendChild(document.importNode(c, true)));
+            pushHistory();
+            document.getElementById('stStatus').textContent = 'SVG импортирован';
+        };
+        reader.readAsText(file); e.target.value = '';
+    });
+
+    // Drag & drop
+    // dropzone click removed — start with blank canvas
+    viewport.addEventListener('dragover', (e) => { e.preventDefault(); dropzone.classList.add('drag-over'); });
+    viewport.addEventListener('dragleave', () => dropzone.classList.remove('drag-over'));
+    viewport.addEventListener('drop', (e) => {
+        e.preventDefault(); dropzone.classList.remove('drag-over');
+        const file = e.dataTransfer.files[0];
+        if (file && file.name.endsWith('.svg')) {
+            const reader = new FileReader();
+            reader.onload = () => {
+                const doc = new DOMParser().parseFromString(reader.result, 'image/svg+xml');
+                const imp = doc.querySelector('svg');
+                if (imp) { Array.from(imp.children).forEach(c => getActiveLayer().appendChild(document.importNode(c, true))); pushHistory(); }
+            };
+            reader.readAsText(file);
+        }
+    });
+
+    // Export SVG
+    document.getElementById('btnExportSvg').addEventListener('click', () => {
+        deselectAll();
+        // Strip positioning styles before export
+        const savedStyle = svg.getAttribute('style') || '';
+        svg.removeAttribute('style');
+
+        // Convert inline attributes to CSS classes
+        const clone = svg.cloneNode(true);
+        const styleMap = new Map();
+        let classIdx = 0;
+
+        function getStyleKey(el) {
+            const attrs = ['fill', 'fill-opacity', 'stroke', 'stroke-width', 'stroke-linecap', 'stroke-linejoin', 'opacity', 'font-size', 'font-family', 'font-weight', 'letter-spacing'];
+            const parts = [];
+            attrs.forEach(a => {
+                const v = el.getAttribute(a);
+                if (v !== null) parts.push(a + ':' + v);
+            });
+            return parts.join(';');
+        }
+
+        function processElement(el) {
+            if (el.nodeType !== 1) return;
+            const tag = el.tagName;
+            if (tag === 'g' || tag === 'svg') {
+                Array.from(el.children).forEach(processElement);
+                return;
+            }
+            const key = getStyleKey(el);
+            if (!key) return;
+
+            let className;
+            if (styleMap.has(key)) {
+                className = styleMap.get(key);
+            } else {
+                className = 'st' + classIdx++;
+                styleMap.set(key, className);
+            }
+            el.setAttribute('class', className);
+
+            // Remove inline style attributes that are now in CSS
+            ['fill', 'fill-opacity', 'stroke', 'stroke-width', 'stroke-linecap', 'stroke-linejoin', 'opacity', 'font-size', 'font-family', 'font-weight', 'letter-spacing'].forEach(a => {
+                el.removeAttribute(a);
+            });
+        }
+
+        Array.from(clone.children).forEach(processElement);
+
+        // Build <style> block
+        if (styleMap.size > 0) {
+            const styleEl = document.createElementNS('http://www.w3.org/2000/svg', 'style');
+            let css = '';
+            styleMap.forEach((cls, key) => {
+                css += '.' + cls + '{' + key + '}\n';
+            });
+            styleEl.textContent = css;
+            clone.insertBefore(styleEl, clone.firstChild);
+        }
+
+        // Remove data-* attributes from export
+        clone.querySelectorAll('[data-name]').forEach(el => el.removeAttribute('data-name'));
+        clone.querySelectorAll('[data-layer]').forEach(el => el.removeAttribute('data-layer'));
+
+        const data = new XMLSerializer().serializeToString(clone);
+        if (savedStyle) svg.setAttribute('style', savedStyle); else positionCanvas();
+        const a = document.createElement('a');
+        a.href = URL.createObjectURL(new Blob([data], { type: 'image/svg+xml' }));
+        a.download = 'drawing.svg'; a.click(); URL.revokeObjectURL(a.href);
+        document.getElementById('stStatus').textContent = 'SVG экспортирован';
+    });
+
+    // Export PNG
+    document.getElementById('btnExportPng').addEventListener('click', () => {
+        deselectAll();
+        const savedStyle = svg.getAttribute('style') || '';
+        svg.removeAttribute('style');
+        const data = new XMLSerializer().serializeToString(svg);
+        if (savedStyle) svg.setAttribute('style', savedStyle); else positionCanvas();
+        const canvas = document.createElement('canvas'); canvas.width = 800; canvas.height = 600;
+        const ctx = canvas.getContext('2d'); ctx.fillStyle = '#fff'; ctx.fillRect(0, 0, 800, 600);
+        const img = new Image();
+        img.onload = () => { ctx.drawImage(img, 0, 0); const a = document.createElement('a'); a.href = canvas.toDataURL('image/png'); a.download = 'drawing.png'; a.click(); document.getElementById('stStatus').textContent = 'PNG экспортирован'; };
+        img.src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(data)));
+    });
+
+    // Optimize
+    document.getElementById('btnOptimize').addEventListener('click', async () => {
+        deselectAll();
+        const savedStyle = svg.getAttribute('style') || '';
+        svg.removeAttribute('style');
+        const data = new XMLSerializer().serializeToString(svg);
+        if (savedStyle) svg.setAttribute('style', savedStyle); else positionCanvas();
+        document.getElementById('stStatus').textContent = 'Оптимизация...';
+        try {
+            const res = await fetch('/api/svg-optimize', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ svg: data }) });
+            const result = await res.json();
+            if (result.svg) {
+                const doc = new DOMParser().parseFromString(result.svg, 'image/svg+xml');
+                const s = doc.querySelector('svg');
+                if (s) { svg.innerHTML = s.innerHTML; pushHistory(); }
+                document.getElementById('stStatus').textContent = `Оптимизировано: −${result.saved}%`;
+            }
+        } catch { document.getElementById('stStatus').textContent = 'Ошибка'; }
+    });
+
+    // ── Keyboard ──
+    document.addEventListener('keydown', (e) => {
+        if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.tagName === 'SELECT') return;
+        const ctrl = e.ctrlKey || e.metaKey;
+        if (e.code === 'KeyV' && !ctrl) document.querySelector('[data-tool="select"]').click();
+        else if (e.code === 'KeyR' && !ctrl) document.querySelector('[data-tool="rect"]').click();
+        else if (e.code === 'KeyO' && !ctrl) document.querySelector('[data-tool="circle"]').click();
+        else if (e.code === 'KeyL' && !ctrl) document.querySelector('[data-tool="line"]').click();
+        else if (e.code === 'KeyP' && !ctrl) document.querySelector('[data-tool="path"]').click();
+        else if (e.code === 'KeyT' && !ctrl) document.querySelector('[data-tool="text"]').click();
+        else if ((e.code === 'Delete' || e.code === 'Backspace') && selectedEl) { selectedEl.remove(); deselectAll(); pushHistory(); }
+        else if (ctrl && e.code === 'KeyZ' && !e.shiftKey) { e.preventDefault(); undo(); }
+        else if (ctrl && e.code === 'KeyZ' && e.shiftKey) { e.preventDefault(); redo(); }
+        else if (ctrl && e.code === 'KeyC' && selectedEl) {
+            e.preventDefault();
+            window._svgClipboard = selectedEl.cloneNode(true);
+            document.getElementById('stStatus').textContent = 'Скопировано';
+        }
+        else if (ctrl && e.code === 'KeyV' && window._svgClipboard) {
+            e.preventDefault();
+            const clone = window._svgClipboard.cloneNode(true);
+            // Offset paste position
+            const tag = clone.tagName;
+            if (tag === 'rect' || tag === 'text' || tag === 'image') {
+                clone.setAttribute('x', parseFloat(clone.getAttribute('x') || 0) + 20);
+                clone.setAttribute('y', parseFloat(clone.getAttribute('y') || 0) + 20);
+            } else if (tag === 'ellipse' || tag === 'circle') {
+                clone.setAttribute('cx', parseFloat(clone.getAttribute('cx') || 0) + 20);
+                clone.setAttribute('cy', parseFloat(clone.getAttribute('cy') || 0) + 20);
+            } else if (tag === 'line') {
+                ['x1','y1','x2','y2'].forEach(a => clone.setAttribute(a, parseFloat(clone.getAttribute(a) || 0) + 20));
+            } else {
+                const t = clone.getAttribute('transform') || '';
+                const m = t.match(/translate\(\s*([^,)\s]+)\s*,?\s*([^)\s]*)\s*\)/);
+                let ox = m ? parseFloat(m[1]) || 0 : 0;
+                let oy = m ? parseFloat(m[2]) || 0 : 0;
+                const rest = t.replace(/translate\([^)]*\)/, '').trim();
+                clone.setAttribute('transform', `translate(${ox + 20},${oy + 20}) ${rest}`.trim());
+            }
+            svg.appendChild(clone);
+            pushHistory();
+            selectElement(clone);
+            document.getElementById('stStatus').textContent = 'Вставлено';
+        }
+        else if (ctrl && e.code === 'KeyX' && selectedEl) {
+            e.preventDefault();
+            window._svgClipboard = selectedEl.cloneNode(true);
+            selectedEl.remove();
+            deselectAll();
+            pushHistory();
+            document.getElementById('stStatus').textContent = 'Вырезано';
+        }
+        else if (ctrl && e.code === 'KeyD') { e.preventDefault(); document.getElementById('btnDuplicate').click(); }
+        else if (ctrl && e.code === 'KeyS') { e.preventDefault(); document.getElementById('btnExportSvg').click(); }
+        else if (ctrl && e.code === 'KeyO') { e.preventDefault(); document.getElementById('btnImport').click(); }
+        else if (e.code === 'ArrowLeft' || e.code === 'ArrowRight' || e.code === 'ArrowUp' || e.code === 'ArrowDown') {
+            if (!selectedEl) return;
+            e.preventDefault();
+            const step = e.shiftKey ? 10 : 1;
+            const tag = selectedEl.tagName;
+            let dx = 0, dy = 0;
+            if (e.code === 'ArrowLeft') dx = -step;
+            if (e.code === 'ArrowRight') dx = step;
+            if (e.code === 'ArrowUp') dy = -step;
+            if (e.code === 'ArrowDown') dy = step;
+
+            if (tag === 'rect' || tag === 'text' || tag === 'image') {
+                selectedEl.setAttribute('x', parseFloat(selectedEl.getAttribute('x') || 0) + dx);
+                selectedEl.setAttribute('y', parseFloat(selectedEl.getAttribute('y') || 0) + dy);
+            } else if (tag === 'ellipse' || tag === 'circle') {
+                selectedEl.setAttribute('cx', parseFloat(selectedEl.getAttribute('cx') || 0) + dx);
+                selectedEl.setAttribute('cy', parseFloat(selectedEl.getAttribute('cy') || 0) + dy);
+            } else if (tag === 'line') {
+                selectedEl.setAttribute('x1', parseFloat(selectedEl.getAttribute('x1') || 0) + dx);
+                selectedEl.setAttribute('y1', parseFloat(selectedEl.getAttribute('y1') || 0) + dy);
+                selectedEl.setAttribute('x2', parseFloat(selectedEl.getAttribute('x2') || 0) + dx);
+                selectedEl.setAttribute('y2', parseFloat(selectedEl.getAttribute('y2') || 0) + dy);
+            } else {
+                const t = selectedEl.getAttribute('transform') || '';
+                const m = t.match(/translate\(([^,)]+),?([^)]*)/);
+                let ox = 0, oy = 0;
+                if (m) { ox = parseFloat(m[1]) || 0; oy = parseFloat(m[2]) || 0; }
+                // Preserve scale and other transforms, only update translate
+                const rest = t.replace(/translate\([^)]*\)/, '').trim();
+                selectedEl.setAttribute('transform', `translate(${ox + dx},${oy + dy}) ${rest}`.trim());
+            }
+            showHandles();
+            pushHistory();
+        }
+        else if (e.code === 'Escape') { deselectAll(); if (tempEl && currentTool === 'path') { tempEl.remove(); tempEl = null; } pathPoints = []; hidePenPoints(); }
+    });
+
+    // ── AI Modal ──
+    const ICONS = {
+        home:'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-4 0v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4',
+        user:'M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z',
+        search:'M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z',
+        heart:'M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z',
+        star:'M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z',
+        settings:'M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z M15 12a3 3 0 11-6 0 3 3 0 016 0z',
+        mail:'M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75',
+        phone:'M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z',
+        lock:'M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z',
+        bell:'M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0',
+        clock:'M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z',
+        cloud:'M2.25 15a4.5 4.5 0 004.5 4.5H18a3.75 3.75 0 001.332-7.257 3 3 0 00-3.758-3.848 5.25 5.25 0 00-10.233 2.33A4.502 4.502 0 002.25 15z',
+        download:'M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3',
+        upload:'M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5',
+        trash:'M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0',
+        plus:'M12 4.5v15m7.5-7.5h-15', minus:'M19.5 12h-15',
+        check:'M4.5 12.75l6 6 9-13.5', close:'M6 18L18 6M6 6l12 12',
+        'arrow-left':'M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18', 'arrow-right':'M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3',
+        'arrow-up':'M4.5 10.5L12 3m0 0l7.5 7.5M12 3v18', 'arrow-down':'M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3',
+        menu:'M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5',
+        globe:'M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418',
+        link:'M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m9.86-2.06a4.5 4.5 0 00-6.364-6.364L6.257 6.514a4.5 4.5 0 001.242 7.244',
+        eye:'M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z M15 12a3 3 0 11-6 0 3 3 0 016 0z',
+        sun:'M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z',
+        moon:'M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z',
+        code:'M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5',
+        terminal:'M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z',
+        database:'M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125',
+        wifi:'M8.288 15.038a5.25 5.25 0 017.424 0M5.106 11.856c3.807-3.808 9.98-3.808 13.788 0M1.924 8.674c5.565-5.565 14.587-5.565 20.152 0M12.53 18.22l-.53.53-.53-.53a.75.75 0 011.06 0z',
+        bookmark:'M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z',
+        share:'M7.217 10.907a2.25 2.25 0 100 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186l9.566-5.314m-9.566 7.5l9.566 5.314m0 0a2.25 2.25 0 103.935 2.186 2.25 2.25 0 00-3.935-2.186zm0-12.814a2.25 2.25 0 103.933-2.185 2.25 2.25 0 00-3.933 2.185z',
+        cart:'M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z',
+        file:'M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z',
+        folder:'M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z',
+        camera:'M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z',
+    };
+    const NAMES = {home:'дом',user:'юзер',search:'поиск',heart:'сердце',star:'звезда',settings:'настройки',mail:'почта',phone:'телефон',lock:'замок',bell:'колокол',clock:'часы',cloud:'облако',download:'скачать',upload:'загрузить',trash:'корзина',plus:'плюс',minus:'минус',check:'галочка',close:'закрыть','arrow-left':'←','arrow-right':'→','arrow-up':'↑','arrow-down':'↓',menu:'меню',globe:'глобус',link:'ссылка',eye:'глаз',sun:'солнце',moon:'луна',code:'код',terminal:'терминал',database:'БД',wifi:'wifi',bookmark:'закладка',share:'поделиться',cart:'корзина',file:'файл',folder:'папка',camera:'камера'};
+
+    let aiSelected = null;
+    document.getElementById('btnAI').addEventListener('click', () => { document.getElementById('aiModal').classList.add('visible'); renderAiGrid(); });
+    document.getElementById('aiCancel').addEventListener('click', () => document.getElementById('aiModal').classList.remove('visible'));
+    document.getElementById('aiModal').addEventListener('click', (e) => { if (e.target.id === 'aiModal') e.target.classList.remove('visible'); });
+    document.getElementById('aiSearch').addEventListener('input', renderAiGrid);
+
+    function renderAiGrid() {
+        const q = document.getElementById('aiSearch').value.toLowerCase().trim();
+        const color = document.getElementById('aiColor').value;
+        const style = document.getElementById('aiStyle').value;
+        const sz = Math.min(parseInt(document.getElementById('aiSize').value), 40);
+        let keys = Object.keys(ICONS);
+        if (q) keys = keys.filter(k => k.includes(q) || (NAMES[k] && NAMES[k].includes(q)));
+        const grid = document.getElementById('aiGrid');
+        grid.innerHTML = keys.map(k => {
+            const d = ICONS[k];
+            let s;
+            if (style === 'outline') s = `<svg width="${sz}" height="${sz}" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="${d}"/></svg>`;
+            else if (style === 'filled') s = `<svg width="${sz}" height="${sz}" viewBox="0 0 24 24" fill="${color}" stroke="none"><path d="${d}"/></svg>`;
+            else s = `<svg width="${sz}" height="${sz}" viewBox="0 0 24 24" fill="${color}" fill-opacity="0.2" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="${d}"/></svg>`;
+            return `<div class="icon-card" data-icon="${k}">${s}<span>${NAMES[k]||k}</span></div>`;
+        }).join('');
+        grid.querySelectorAll('.icon-card').forEach(c => c.addEventListener('click', () => {
+            grid.querySelectorAll('.icon-card').forEach(x => x.classList.remove('selected'));
+            c.classList.add('selected'); aiSelected = c.dataset.icon;
+        }));
+    }
+    document.getElementById('aiAdd').addEventListener('click', () => {
+        if (!aiSelected || !ICONS[aiSelected]) return;
+        const color = document.getElementById('aiColor').value;
+        const style = document.getElementById('aiStyle').value;
+        const size = parseInt(document.getElementById('aiSize').value);
+        const g = svgEl('g', { 'data-name': NAMES[aiSelected] || aiSelected, transform: `translate(${400-size/2},${300-size/2}) scale(${size/24})` });
+        const p = svgEl('path', { d: ICONS[aiSelected] });
+        if (style === 'outline') { p.setAttribute('fill','none'); p.setAttribute('stroke',color); p.setAttribute('stroke-width','1.5'); p.setAttribute('stroke-linecap','round'); p.setAttribute('stroke-linejoin','round'); }
+        else if (style === 'filled') { p.setAttribute('fill',color); }
+        else { p.setAttribute('fill',color); p.setAttribute('fill-opacity','0.2'); p.setAttribute('stroke',color); p.setAttribute('stroke-width','1.5'); p.setAttribute('stroke-linecap','round'); p.setAttribute('stroke-linejoin','round'); }
+        g.appendChild(p); getActiveLayer().appendChild(g); pushHistory();
+        document.getElementById('aiModal').classList.remove('visible');
+        document.getElementById('stStatus').textContent = `Добавлено: ${NAMES[aiSelected]||aiSelected}`;
+    });
+    renderAiGrid();
+
+    // ── Text to Path via opentype.js ──
+    const fontCache = {};
+
+    function getFontUrl(ff, fw) {
+        const w = parseInt(fw) || 400;
+        if (ff.includes('JetBrains')) return '/vendor/fonts/jetbrains-' + w + '.ttf';
+        return '/vendor/fonts/manrope-' + w + '.ttf';
+    }
+
+    async function loadFont(url) {
+        if (fontCache[url]) return fontCache[url];
+        try {
+            const font = await opentype.load(url);
+            fontCache[url] = font;
+            return font;
+        } catch(e) {
+            console.error('Font load error:', e);
+            return null;
+        }
+    }
+
+    async function rasterizeText(textEl) {
+        if (!textEl || textEl.tagName !== 'text') return;
+
+        const text = textEl.textContent || '';
+        if (!text.trim()) return;
+
+        const fs = parseFloat(textEl.getAttribute('font-size') || 20);
+        const ff = textEl.getAttribute('font-family') || 'Manrope, sans-serif';
+        const fw = textEl.getAttribute('font-weight') || '400';
+        const fill = textEl.getAttribute('fill') || '#000';
+        const ls = parseFloat(textEl.getAttribute('letter-spacing') || 0);
+        const x = parseFloat(textEl.getAttribute('x') || 0);
+        const y = parseFloat(textEl.getAttribute('y') || 0);
+
+        document.getElementById('stStatus').textContent = 'Загрузка шрифта...';
+
+        const fontUrl = getFontUrl(ff, fw);
+        const font = await loadFont(fontUrl);
+
+        if (!font) {
+            document.getElementById('stStatus').textContent = 'Ошибка загрузки шрифта';
+            return;
+        }
+
+        // Generate path using opentype.js
+        const otPath = font.getPath(text, x, y, fs, { letterSpacing: ls / fs });
+        const pathD = otPath.toPathData(2);
+
+        if (!pathD) {
+            document.getElementById('stStatus').textContent = 'Не удалось создать контур';
+            return;
+        }
+
+        const pathEl = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        pathEl.setAttribute('d', pathD);
+        pathEl.setAttribute('fill', fill);
+        pathEl.setAttribute('fill-rule', 'nonzero');
+        pathEl.setAttribute('data-name', 'Контур: ' + text.substring(0, 20));
+
+        const parent = textEl.parentElement;
+        parent.insertBefore(pathEl, textEl);
+        textEl.remove();
+
+        if (selectedEl === textEl) selectedEl = pathEl;
+        pushHistory();
+        selectElement(pathEl);
+        document.getElementById('stStatus').textContent = 'Текст → контур';
+    }
+
+    document.getElementById('btnRasterize').addEventListener('click', async () => {
+        if (selectedEl && selectedEl.tagName === 'text') await rasterizeText(selectedEl);
+        else document.getElementById('stStatus').textContent = 'Выделите текстовый элемент';
+    });
+
+
+    // ── Alignment Tools ──
+    function alignSelected(mode) {
+        if (!selectedEl) return;
+        const canvasW = parseInt(svg.getAttribute('width'));
+        const canvasH = parseInt(svg.getAttribute('height'));
+        const bb = selectedEl.getBBox();
+        const tag = selectedEl.tagName;
+        const hasTransform = tag === 'g' || tag === 'path' || tag === 'text';
+
+        // Get current visual position
+        let curX, curY;
+        if (tag === 'rect' || tag === 'image') { curX = parseFloat(selectedEl.getAttribute('x')||0); curY = parseFloat(selectedEl.getAttribute('y')||0); }
+        else if (tag === 'ellipse' || tag === 'circle') { curX = parseFloat(selectedEl.getAttribute('cx')||0) - bb.width/2; curY = parseFloat(selectedEl.getAttribute('cy')||0) - bb.height/2; }
+        else if (tag === 'line') { curX = Math.min(parseFloat(selectedEl.getAttribute('x1')),parseFloat(selectedEl.getAttribute('x2'))); curY = Math.min(parseFloat(selectedEl.getAttribute('y1')),parseFloat(selectedEl.getAttribute('y2'))); }
+        else { curX = bb.x; curY = bb.y; }
+
+        let newX = curX, newY = curY;
+        if (mode === 'left') newX = 0;
+        else if (mode === 'centerX') newX = (canvasW - bb.width) / 2;
+        else if (mode === 'right') newX = canvasW - bb.width;
+        else if (mode === 'top') newY = 0;
+        else if (mode === 'centerY') newY = (canvasH - bb.height) / 2;
+        else if (mode === 'bottom') newY = canvasH - bb.height;
+
+        const dx = newX - curX, dy = newY - curY;
+        if (Math.abs(dx) < 0.1 && Math.abs(dy) < 0.1) return;
+
+        if (tag === 'rect' || tag === 'image') {
+            selectedEl.setAttribute('x', parseFloat(selectedEl.getAttribute('x')||0) + dx);
+            selectedEl.setAttribute('y', parseFloat(selectedEl.getAttribute('y')||0) + dy);
+        } else if (tag === 'ellipse' || tag === 'circle') {
+            selectedEl.setAttribute('cx', parseFloat(selectedEl.getAttribute('cx')||0) + dx);
+            selectedEl.setAttribute('cy', parseFloat(selectedEl.getAttribute('cy')||0) + dy);
+        } else if (tag === 'line') {
+            selectedEl.setAttribute('x1', parseFloat(selectedEl.getAttribute('x1')||0) + dx);
+            selectedEl.setAttribute('y1', parseFloat(selectedEl.getAttribute('y1')||0) + dy);
+            selectedEl.setAttribute('x2', parseFloat(selectedEl.getAttribute('x2')||0) + dx);
+            selectedEl.setAttribute('y2', parseFloat(selectedEl.getAttribute('y2')||0) + dy);
+        } else {
+            const t = selectedEl.getAttribute('transform') || '';
+            const m = t.match(/translate\(\s*([^,)\s]+)\s*,?\s*([^)\s]*)\s*\)/);
+            let ox = m ? parseFloat(m[1])||0 : 0, oy = m ? parseFloat(m[2])||0 : 0;
+            const rest = t.replace(/translate\([^)]*\)/, '').trim();
+            selectedEl.setAttribute('transform', `translate(${ox+dx},${oy+dy}) ${rest}`.trim());
+        }
+        pushHistory(); showHandles(); updateProps();
+    }
+
+    document.getElementById('btnAlignL').addEventListener('click', () => alignSelected('left'));
+    document.getElementById('btnAlignCX').addEventListener('click', () => alignSelected('centerX'));
+    document.getElementById('btnAlignR').addEventListener('click', () => alignSelected('right'));
+    document.getElementById('btnAlignT').addEventListener('click', () => alignSelected('top'));
+    document.getElementById('btnAlignCY').addEventListener('click', () => alignSelected('centerY'));
+    document.getElementById('btnAlignB').addEventListener('click', () => alignSelected('bottom'));
+
+    // ── Dev Mode (SVG Code Viewer/Editor) ──
+    document.getElementById('btnDevMode').addEventListener('click', () => {
+        const savedStyle = svg.getAttribute('style') || '';
+        svg.removeAttribute('style');
+        let code = new XMLSerializer().serializeToString(svg);
+        if (savedStyle) svg.setAttribute('style', savedStyle); else positionCanvas();
+        // Pretty print
+        code = code.replace(/></g, '>\n<');
+        code = code.replace(/\n\n+/g, '\n');
+        document.getElementById('devCode').value = code;
+        document.getElementById('devModal').classList.add('visible');
+    });
+    document.getElementById('devClose').addEventListener('click', () => document.getElementById('devModal').classList.remove('visible'));
+    document.getElementById('devModal').addEventListener('click', (e) => { if (e.target.id === 'devModal') e.target.classList.remove('visible'); });
+    document.getElementById('devCopy').addEventListener('click', () => {
+        const ta = document.getElementById('devCode');
+        ta.select();
+        document.execCommand('copy');
+        document.getElementById('devCopy').textContent = 'Скопировано!';
+        setTimeout(() => document.getElementById('devCopy').textContent = 'Копировать', 1500);
+    });
+
+    // Apply edited SVG code back
+    document.getElementById('devCode').addEventListener('keydown', (e) => {
+        if ((e.ctrlKey || e.metaKey) && e.code === 'Enter') {
+            e.preventDefault();
+            const code = document.getElementById('devCode').value;
+            try {
+                const doc = new DOMParser().parseFromString(code, 'image/svg+xml');
+                const newSvg = doc.querySelector('svg');
+                if (newSvg) {
+                    svg.innerHTML = newSvg.innerHTML;
+                    initLayers();
+                    deselectAll();
+                    pushHistory();
+                    document.getElementById('devModal').classList.remove('visible');
+                    document.getElementById('stStatus').textContent = 'SVG код применён';
+                }
+            } catch(err) { alert('Ошибка парсинга SVG'); }
+        }
+        e.stopPropagation();
+    });
+
+
+    // ── Context Menu ──
+    const ctxMenu = document.getElementById('ctxMenu');
+
+    viewport.addEventListener('contextmenu', (e) => {
+        e.preventDefault();
+        const vpR = viewport.getBoundingClientRect();
+
+        // Try to select element under cursor if nothing selected
+        if (!selectedEl) {
+            const hVis = selHandles.style.display;
+            const lhVis = lineHandles.style.display;
+            selHandles.style.display = 'none';
+            lineHandles.style.display = 'none';
+            let target = document.elementFromPoint(e.clientX, e.clientY);
+            selHandles.style.display = hVis;
+            lineHandles.style.display = lhVis;
+            if (target && target !== svg && svg.contains(target)) {
+                while (target.parentElement && target.parentElement !== svg) target = target.parentElement;
+                selectElement(target);
+            }
+        }
+
+        // Update menu items state
+        ctxMenu.querySelectorAll('.ctx-item').forEach(item => {
+            const a = item.dataset.action;
+            if (a === 'paste') item.classList.toggle('disabled', !window._svgClipboard);
+            else if (a === 'ungroup') item.classList.toggle('disabled', !selectedEl || selectedEl.tagName !== 'g' || !!selectedEl.getAttribute('data-layer'));
+            else if (a === 'rasterize') item.classList.toggle('disabled', !selectedEl || selectedEl.tagName !== 'text');
+            else if (a === 'group') item.classList.toggle('disabled', svg.children.length < 2);
+            else item.classList.toggle('disabled', !selectedEl);
+        });
+
+        ctxMenu.classList.add('visible');
+        const menuW = ctxMenu.offsetWidth;
+        const menuH = ctxMenu.offsetHeight;
+        let mx = e.clientX - vpR.left;
+        let my = e.clientY - vpR.top;
+        if (mx + menuW > vpR.width) mx = vpR.width - menuW - 4;
+        if (my + menuH > vpR.height) my = vpR.height - menuH - 4;
+        if (mx < 0) mx = 4;
+        if (my < 0) my = 4;
+        ctxMenu.style.left = mx + 'px';
+        ctxMenu.style.top = my + 'px';
+    });
+
+    document.addEventListener('click', () => ctxMenu.classList.remove('visible'));
+    document.addEventListener('keydown', (e) => { if (e.code === 'Escape') ctxMenu.classList.remove('visible'); });
+
+    ctxMenu.querySelectorAll('.ctx-item').forEach(item => {
+        item.addEventListener('click', async () => {
+            ctxMenu.classList.remove('visible');
+            const a = item.dataset.action;
+            if (a === 'copy' && selectedEl) {
+                window._svgClipboard = selectedEl.cloneNode(true);
+                document.getElementById('stStatus').textContent = 'Скопировано';
+            } else if (a === 'cut' && selectedEl) {
+                window._svgClipboard = selectedEl.cloneNode(true);
+                selectedEl.remove(); deselectAll(); pushHistory();
+                document.getElementById('stStatus').textContent = 'Вырезано';
+            } else if (a === 'paste' && window._svgClipboard) {
+                const clone = window._svgClipboard.cloneNode(true);
+                const tag = clone.tagName;
+                if (tag === 'rect' || tag === 'text') { clone.setAttribute('x', parseFloat(clone.getAttribute('x')||0)+20); clone.setAttribute('y', parseFloat(clone.getAttribute('y')||0)+20); }
+                else if (tag === 'ellipse') { clone.setAttribute('cx', parseFloat(clone.getAttribute('cx')||0)+20); clone.setAttribute('cy', parseFloat(clone.getAttribute('cy')||0)+20); }
+                else if (tag === 'line') { ['x1','y1','x2','y2'].forEach(a2 => clone.setAttribute(a2, parseFloat(clone.getAttribute(a2)||0)+20)); }
+                else { const t=clone.getAttribute('transform')||''; const m=t.match(/translate\(\s*([^,)\s]+)\s*,?\s*([^)\s]*)\s*\)/); let ox=m?parseFloat(m[1])||0:0,oy=m?parseFloat(m[2])||0:0; const rest=t.replace(/translate\([^)]*\)/,'').trim(); clone.setAttribute('transform',`translate(${ox+20},${oy+20}) ${rest}`.trim()); }
+                getActiveLayer().appendChild(clone); pushHistory(); selectElement(clone);
+            } else if (a === 'duplicate') {
+                document.getElementById('btnDuplicate').click();
+            } else if (a === 'delete' && selectedEl) {
+                selectedEl.remove(); deselectAll(); pushHistory();
+            } else if (a === 'front' && selectedEl) {
+                svg.appendChild(selectedEl); pushHistory(); updateLayers();
+            } else if (a === 'back' && selectedEl) {
+                if (svg.firstChild !== selectedEl) { svg.insertBefore(selectedEl, svg.firstChild); pushHistory(); updateLayers(); }
+            } else if (a === 'group') {
+                // Group all elements in active layer into a <g>
+                const layer = getActiveLayer();
+                if (layer.children.length > 0) {
+                    const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+                    g.setAttribute('data-name', 'Группа');
+                    while (layer.firstChild) g.appendChild(layer.firstChild);
+                    layer.appendChild(g);
+                    pushHistory(); selectElement(g);
+                    document.getElementById('stStatus').textContent = 'Сгруппировано';
+                }
+            } else if (a === 'rasterize' && selectedEl && selectedEl.tagName === 'text') {
+                await rasterizeText(selectedEl);
+            } else if (a === 'ungroup' && selectedEl && selectedEl.tagName === 'g' && !selectedEl.getAttribute('data-layer')) {
+                const g = selectedEl;
+                const children = Array.from(g.children);
+                const parent = g.parentElement;
+                children.forEach(child => parent.insertBefore(child, g));
+                g.remove();
+                deselectAll(); pushHistory();
+                document.getElementById('stStatus').textContent = 'Разгруппировано';
+            }
+        });
+    });
+
+    // Ctrl+G / Ctrl+Shift+G shortcuts
+    document.addEventListener('keydown', (e) => {
+        if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+        const ctrl = e.ctrlKey || e.metaKey;
+        if (ctrl && e.code === 'KeyG' && !e.shiftKey) {
+            e.preventDefault();
+            const layer = getActiveLayer();
+            if (layer.children.length > 0) {
+                const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+                g.setAttribute('data-name', 'Группа');
+                while (layer.firstChild) g.appendChild(layer.firstChild);
+                layer.appendChild(g);
+                pushHistory(); selectElement(g);
+                document.getElementById('stStatus').textContent = 'Сгруппировано';
+            }
+        } else if (ctrl && e.code === 'KeyG' && e.shiftKey) {
+            e.preventDefault();
+            if (selectedEl && selectedEl.tagName === 'g' && !selectedEl.getAttribute('data-layer')) {
+                const g = selectedEl;
+                const parent = g.parentElement;
+                const children = Array.from(g.children);
+                children.forEach(child => parent.insertBefore(child, g));
+                g.remove(); deselectAll(); pushHistory();
+                document.getElementById('stStatus').textContent = 'Разгруппировано';
+            }
+        }
+    });
+
+
+    // ── Inline Text Editor ──
+    const textOverlay = document.getElementById('textEditOverlay');
+    const textInput = document.getElementById('textEditInput');
+    let editingText = null;
+
+    function startTextEdit(el) {
+        editingText = el;
+        const bb = el.getBBox();
+        const svgRect = svg.getBoundingClientRect();
+        const vpRect = viewport.getBoundingClientRect();
+        const fs = parseFloat(el.getAttribute('font-size') || 20);
+
+        textOverlay.style.display = 'block';
+        textOverlay.style.left = (svgRect.left - vpRect.left + bb.x * zoom) + 'px';
+        textOverlay.style.top = (svgRect.top - vpRect.top + bb.y * zoom) + 'px';
+
+        textInput.value = el.textContent;
+        textInput.style.fontSize = (fs * zoom) + 'px';
+        textInput.style.fontFamily = el.getAttribute('font-family') || 'Manrope, sans-serif';
+        textInput.style.color = el.getAttribute('fill') || '#000';
+        textInput.style.minWidth = (bb.width * zoom + 20) + 'px';
+        textInput.style.height = (bb.height * zoom + 10) + 'px';
+
+        selHandles.style.display = 'none';
+        textInput.focus();
+        textInput.select();
+    }
+
+    function finishTextEdit() {
+        if (!editingText) return;
+        const newText = textInput.value.trim();
+        if (newText && newText !== editingText.textContent) {
+            editingText.textContent = newText;
+            pushHistory();
+        }
+        textOverlay.style.display = 'none';
+        if (editingText) { selectElement(editingText); }
+        editingText = null;
+    }
+
+    textInput.addEventListener('blur', finishTextEdit);
+    textInput.addEventListener('keydown', (e) => {
+        if (e.code === 'Enter' && !e.shiftKey) { e.preventDefault(); finishTextEdit(); }
+        if (e.code === 'Escape') { textOverlay.style.display = 'none'; editingText = null; }
+        e.stopPropagation(); // don't trigger tool shortcuts
+    });
+
+    // ── Tabs ──
+    const tabBar = document.getElementById('tabBar');
+    let tabs = [{ name: 'Новый', svgContent: '', w: 800, h: 600 }];
+    let activeTab = 0;
+
+    function renderTabs() {
+        let html = '';
+        tabs.forEach((t, i) => {
+            html += '<div class="tab-item ' + (i === activeTab ? 'active' : '') + '" data-tab="' + i + '">';
+            html += '<span class="tab-name">' + t.name + '</span>';
+            if (tabs.length > 1) html += '<button class="tab-close" data-close="' + i + '">&times;</button>';
+            html += '</div>';
+        });
+        html += '<button class="tab-add" id="tabAdd" title="Новая вкладка (Ctrl+T)">+</button>';
+        tabBar.innerHTML = html;
+
+        tabBar.querySelectorAll('.tab-item').forEach(el => {
+            el.addEventListener('click', (e) => {
+                if (e.target.closest('.tab-close')) return;
+                switchTab(parseInt(el.dataset.tab));
+            });
+        });
+        tabBar.querySelectorAll('.tab-close').forEach(btn => {
+            btn.addEventListener('click', () => closeTab(parseInt(btn.dataset.close)));
+        });
+        document.getElementById('tabAdd').addEventListener('click', addTab);
+    }
+
+    function saveCurrentTab() {
+        tabs[activeTab].svgContent = svg.innerHTML;
+        tabs[activeTab].w = parseInt(svg.getAttribute('width'));
+        tabs[activeTab].h = parseInt(svg.getAttribute('height'));
+        tabs[activeTab].history = [...history];
+        tabs[activeTab].historyIdx = historyIdx;
+    }
+
+    function switchTab(idx) {
+        if (idx === activeTab) return;
+        saveCurrentTab();
+        deselectAll();
+        activeTab = idx;
+        const t = tabs[idx];
+        svg.innerHTML = t.svgContent;
+        svg.setAttribute('width', t.w); svg.setAttribute('height', t.h);
+        svg.setAttribute('viewBox', '0 0 ' + t.w + ' ' + t.h);
+        history = t.history || [t.svgContent];
+        historyIdx = t.historyIdx !== undefined ? t.historyIdx : 0;
+        document.getElementById('stSize').textContent = t.w + ' \u00d7 ' + t.h;
+        positionCanvas();
+        updateLayers(); updateCount();
+        renderTabs();
+    }
+
+    function addTab() {
+        saveCurrentTab();
+        deselectAll();
+        tabs.push({ name: 'Новый ' + (tabs.length + 1), svgContent: '', w: 800, h: 600, history: [''], historyIdx: 0 });
+        activeTab = tabs.length - 1;
+        svg.innerHTML = '';
+        svg.setAttribute('width', 800); svg.setAttribute('height', 600);
+        svg.setAttribute('viewBox', '0 0 800 600');
+        history = ['']; historyIdx = 0;
+        document.getElementById('stSize').textContent = '800 \u00d7 600';
+        positionCanvas();
+        updateLayers(); updateCount();
+        renderTabs();
+    }
+
+    function closeTab(idx) {
+        if (tabs.length <= 1) return;
+        tabs.splice(idx, 1);
+        if (activeTab >= tabs.length) activeTab = tabs.length - 1;
+        if (activeTab === idx || activeTab > idx) {
+            activeTab = Math.max(0, activeTab > idx ? activeTab - 1 : activeTab);
+        }
+        const t = tabs[activeTab];
+        svg.innerHTML = t.svgContent;
+        svg.setAttribute('width', t.w); svg.setAttribute('height', t.h);
+        svg.setAttribute('viewBox', '0 0 ' + t.w + ' ' + t.h);
+        history = t.history || [t.svgContent];
+        historyIdx = t.historyIdx !== undefined ? t.historyIdx : 0;
+        document.getElementById('stSize').textContent = t.w + ' \u00d7 ' + t.h;
+        positionCanvas();
+        updateLayers(); updateCount();
+        renderTabs();
+    }
+
+    // Ctrl+T for new tab
+    document.addEventListener('keydown', (e) => {
+        if ((e.ctrlKey || e.metaKey) && e.code === 'KeyT' && e.target.tagName !== 'INPUT' && e.target.tagName !== 'TEXTAREA') {
+            e.preventDefault(); addTab();
+        }
+    });
+
+    renderTabs();
+
+    // ── New Canvas ──
+    document.getElementById('btnNew').addEventListener('click', () => document.getElementById('newModal').classList.add('visible'));
+    document.getElementById('newCancel').addEventListener('click', () => document.getElementById('newModal').classList.remove('visible'));
+    document.getElementById('newModal').addEventListener('click', (e) => { if (e.target.id === 'newModal') e.target.classList.remove('visible'); });
+    document.getElementById('newCreate').addEventListener('click', () => {
+        const w = parseInt(document.getElementById('newW').value) || 800;
+        const h = parseInt(document.getElementById('newH').value) || 600;
+        svg.setAttribute('width', w); svg.setAttribute('height', h);
+        svg.setAttribute('viewBox', `0 0 ${w} ${h}`);
+        svg.innerHTML = '';
+        deselectAll();
+        history = []; historyIdx = -1; pushHistory();
+        document.getElementById('stSize').textContent = `${w} \u00d7 ${h}`;
+        document.getElementById('newModal').classList.remove('visible');
+        document.getElementById('stStatus').textContent = `Холст ${w}×${h} создан`;
+        positionCanvas();
+    });
+    // Ctrl+N
+    document.addEventListener('keydown', (e) => {
+        if ((e.ctrlKey || e.metaKey) && e.code === 'KeyN') { e.preventDefault(); document.getElementById('btnNew').click(); }
+    });
+})();
+</script>
+</body>
+</html>
