From 2c5ec8b06ce50a0879a844d11b091053c29febdb Mon Sep 17 00:00:00 2001
From: savsis <dev@savsis.xyz>
Date: Sun, 4 Oct 2026 03:51:16 +0500
Subject: [PATCH] feat: admin panel redesign, chain builder, users page, audit
 log, command palette

New visual system with accent presets, toasts and custom confirms. Chain builder: hold the
left button on Client and drag the wire through servers to Internet (max two servers,
latency warning with measured RTT). Users page lists everyone incl. people without
subscriptions, with search and grant by telegram id. Live node ping, Ctrl+K palette.
---
 admin.html | 1846 ++++++++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 1664 insertions(+), 182 deletions(-)

diff --git a/admin.html b/admin.html
index 54f151e..87b26e7 100644
--- a/admin.html
+++ b/admin.html
@@ -4,272 +4,580 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>MBS Panel</title>
+<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='9' fill='%2322d3ee'/%3E%3Cpath d='M10 20V12M16 23V9M22 18v-4' stroke='%23031116' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Fira+Mono:wght@500;700&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
 <style>
   :root {
-    /* Tokens lifted from remnawave/frontend's actual Mantine theme.ts (GitHub-dark scale, cyan primary). */
-    --bg: #0d1117; --sidebar: #010409; --card-tint: rgba(255,255,255,0.02); --card2-tint: rgba(255,255,255,0.045);
-    --border: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.14);
-    --text: #c9d1d9; --text-dim: #b1bac4; --muted: #8b949e; --muted2: #6e7681;
-    --accent: #22b8cf; --accent-deep: #0c8599; --accent-dim: rgba(34,184,207,0.12); --accent-border: rgba(34,184,207,0.35);
-    --green: #3fb950; --red: #f85149; --yellow: #d29922; --blue: #58a6ff; --pink: #db61a2;
+    --bg: #07090d; --bg-2: #0b0e14; --sidebar: #06080c;
+    --surface: #0e1219; --surface-2: #131923; --surface-3: #1a212c;
+    --card-tint: rgba(255,255,255,0.028); --card2-tint: rgba(255,255,255,0.055);
+    --border: rgba(255,255,255,0.07); --border-strong: rgba(255,255,255,0.14);
+    --text: #e7ebf1; --text-dim: #b5bdca; --muted: #8791a2; --muted2: #5e6a7c;
+    --accent-rgb: 34,211,238; --accent-deep-rgb: 8,145,178;
+    --accent: rgb(var(--accent-rgb)); --accent-deep: rgb(var(--accent-deep-rgb));
+    --accent-dim: rgba(var(--accent-rgb), 0.12); --accent-border: rgba(var(--accent-rgb), 0.38);
+    --green: #3ddc84; --red: #ff5d6c; --yellow: #f5b83d; --blue: #5aa9ff; --pink: #f06ab0;
     --ease: cubic-bezier(0.16, 1, 0.3, 1);
-    --radius: 8px;
+    --radius: 10px;
+    --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
+    --shadow-card: 0 1px 0 rgba(255,255,255,0.045) inset, 0 18px 40px -24px rgba(0,0,0,0.9);
+    --shadow-pop: 0 28px 80px -20px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.06);
   }
   * { box-sizing: border-box; }
+  html { color-scheme: dark; }
   body {
-    margin: 0; background: var(--bg); color: var(--text);
-    font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-    -webkit-font-smoothing: antialiased; font-size: 14px;
+    margin: 0; color: var(--text); min-height: 100vh;
+    background:
+      radial-gradient(1100px 520px at 8% -12%, rgba(var(--accent-rgb), 0.075), transparent 62%),
+      radial-gradient(900px 480px at 104% 4%, rgba(130, 100, 255, 0.05), transparent 58%),
+      var(--bg);
+    background-attachment: fixed;
+    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    -webkit-font-smoothing: antialiased; font-size: 14px; font-feature-settings: "cv11", "ss01";
   }
   * { scrollbar-color: var(--border-strong) transparent; scrollbar-width: thin; }
   ::-webkit-scrollbar { width: 10px; height: 10px; }
   ::-webkit-scrollbar-track { background: transparent; }
   ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; border: 2px solid var(--bg); background-clip: padding-box; }
-  ::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: padding-box; }
+  ::-webkit-scrollbar-thumb:hover { background: var(--muted2); background-clip: padding-box; }
+  ::selection { background: rgba(var(--accent-rgb), 0.3); }
   button, input, select { font-family: inherit; font-size: 14px; }
   a { color: var(--accent); text-decoration: none; }
-
-  /* ---------- Login ---------- */
+  a:hover { text-decoration: underline; text-underline-offset: 3px; }
+  code, .mono { font-family: var(--mono); }
+  :focus-visible { outline: 2px solid rgba(var(--accent-rgb), 0.7); outline-offset: 2px; border-radius: 6px; }
   #login-screen {
     min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
+    position: relative; overflow: hidden;
   }
+  #login-screen::before, #login-screen::after {
+    content: ""; position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.55; pointer-events: none;
+  }
+  #login-screen::before { width: 460px; height: 460px; left: 12%; top: 8%; background: rgba(var(--accent-rgb), 0.16); animation: orbA 14s ease-in-out infinite alternate; }
+  #login-screen::after { width: 380px; height: 380px; right: 10%; bottom: 6%; background: rgba(130, 100, 255, 0.14); animation: orbB 17s ease-in-out infinite alternate; }
+  @keyframes orbA { to { transform: translate(60px, 40px) scale(1.15); } }
+  @keyframes orbB { to { transform: translate(-50px, -30px) scale(1.1); } }
   .login-card {
-    max-width: 340px; width: 100%; background: var(--card-tint); border: 1px solid var(--border);
-    border-radius: 14px; padding: 32px 28px;
-    opacity: 0; animation: fadeIn 0.25s linear forwards;
+    position: relative; z-index: 1;
+    max-width: 360px; width: 100%; padding: 34px 30px;
+    background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
+    border: 1px solid var(--border-strong); border-radius: 18px;
+    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
+    box-shadow: var(--shadow-pop);
+    opacity: 0; animation: fadeIn 0.3s linear forwards;
   }
   @keyframes fadeIn { to { opacity: 1; } }
   @keyframes enter { to { opacity: 1; transform: translateY(0); filter: blur(0); } }
-  .splash { display: flex; flex-direction: column; align-items: center; text-align: center; padding-bottom: 22px; }
+  .splash { display: flex; flex-direction: column; align-items: center; text-align: center; padding-bottom: 24px; }
   .splash-mark {
-    width: 44px; height: 44px; border-radius: 13px; margin-bottom: 14px;
+    width: 48px; height: 48px; border-radius: 14px; margin-bottom: 14px;
     background: linear-gradient(135deg, var(--accent), var(--accent-deep));
+    box-shadow: 0 10px 34px -8px rgba(var(--accent-rgb), 0.7);
     display: flex; align-items: center; justify-content: center;
     opacity: 0; transform: scale(0.6) rotate(-8deg); filter: blur(4px);
     animation: splashMark 0.6s var(--ease) 0.05s forwards;
   }
-  .splash-mark svg { width: 24px; height: 24px; }
+  .splash-mark svg { width: 26px; height: 26px; }
   .splash-title {
-    font-size: 19px; font-weight: 700; letter-spacing: -0.01em;
+    font-size: 20px; font-weight: 700; letter-spacing: -0.02em;
     opacity: 0; transform: translateY(8px); filter: blur(3px);
     animation: splashRise 0.5s var(--ease) 0.28s forwards;
   }
   .splash-tagline {
-    font-size: 11.5px; color: var(--muted2); letter-spacing: 0.04em; margin-top: 4px;
-    opacity: 0;
-    animation: splashFade 0.5s var(--ease) 0.5s forwards;
+    font-size: 11.5px; color: var(--muted2); letter-spacing: 0.06em; margin-top: 5px;
+    opacity: 0; animation: splashFade 0.5s var(--ease) 0.5s forwards;
   }
   @keyframes splashMark { to { opacity: 1; transform: scale(1) rotate(0deg); filter: blur(0); } }
   @keyframes splashRise { to { opacity: 1; transform: translateY(0); filter: blur(0); } }
   @keyframes splashFade { to { opacity: 1; } }
   .login-card h1 { font-size: 17px; margin: 0 0 4px; font-weight: 600; }
   .login-card p { color: var(--muted); font-size: 13px; margin: 0 0 20px; }
-  input[type=password], input[type=text] {
-    width: 100%; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: var(--radius);
-    padding: 11px 13px; color: var(--text); transition: border-color 0.2s var(--ease);
+  input[type=password], input[type=text], input[type=number] {
+    width: 100%; background: rgba(255,255,255,0.035); border: 1px solid var(--border); border-radius: var(--radius);
+    padding: 11px 13px; color: var(--text); margin-bottom: 10px;
+    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
   }
-  input:focus { outline: none; border-color: var(--accent); }
+  .form-row input[type=text], .form-row input[type=password], .section input[type=text], .section input[type=password] { margin-bottom: 0; }
+  input:hover { border-color: var(--border-strong); }
+  input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.16); background: rgba(255,255,255,0.05); }
+  input::placeholder { color: var(--muted2); }
   .btn {
-    padding: 10px 18px; border-radius: var(--radius); border: 1px solid var(--accent-border); cursor: pointer;
-    background: linear-gradient(135deg, rgba(34,184,207,0.15) 0%, rgba(12,133,153,0.1) 100%); color: var(--accent);
-    font-weight: 600; transition: all 0.2s ease;
+    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
+    padding: 10px 18px; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer;
+    background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: #031116;
+    font-weight: 650; letter-spacing: -0.005em;
+    box-shadow: 0 10px 28px -12px rgba(var(--accent-rgb), 0.65), 0 1px 0 rgba(255,255,255,0.25) inset;
+    transition: transform 0.18s var(--ease), box-shadow 0.25s var(--ease), filter 0.2s var(--ease), background 0.2s ease;
   }
-  .btn:hover { background: rgba(34,184,207,0.22); }
-  .btn:active { transform: scale(0.97); }
+  .btn:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 14px 34px -12px rgba(var(--accent-rgb), 0.8), 0 1px 0 rgba(255,255,255,0.3) inset; }
+  .btn:active { transform: scale(0.97); filter: brightness(0.95); }
+  .btn:disabled, .btn.disabled { opacity: 0.4; cursor: not-allowed; transform: none; filter: grayscale(0.4); box-shadow: none; }
   .btn.block { width: 100%; margin-top: 14px; }
-  .btn.ghost { background: transparent; color: var(--text-dim); border: 1px solid var(--border); }
-  .btn.ghost:hover { color: var(--text); border-color: var(--border-strong); background: rgba(255,255,255,0.03); }
-  .btn.danger { background: rgba(248,81,73,0.1); color: var(--red); border: 1px solid rgba(248,81,73,0.3); }
-  .btn.danger:hover { background: rgba(248,81,73,0.18); }
+  .btn.ghost { background: rgba(255,255,255,0.03); color: var(--text-dim); border: 1px solid var(--border); box-shadow: none; }
+  .btn.ghost:hover { color: var(--text); border-color: var(--border-strong); background: rgba(255,255,255,0.07); filter: none; }
+  .btn.danger { background: rgba(255,93,108,0.1); color: var(--red); border: 1px solid rgba(255,93,108,0.32); box-shadow: none; }
+  .btn.danger:hover { background: rgba(255,93,108,0.2); filter: none; }
+  .btn.small { padding: 6px 12px; font-size: 12.5px; border-radius: 8px; }
+  .btn.loading { pointer-events: none; color: transparent !important; }
+  .btn.loading::after {
+    content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%;
+    border: 2px solid rgba(3,17,22,0.35); border-top-color: #031116; animation: spin 0.7s linear infinite;
+  }
+  .btn.ghost.loading::after { border-color: rgba(255,255,255,0.2); border-top-color: var(--text); }
+  @keyframes spin { to { transform: rotate(360deg); } }
   #login-err { color: var(--red); font-size: 13px; min-height: 16px; margin-top: 10px; }
-
-  /* ---------- App shell ---------- */
-  #app { display: none; min-height: 100vh; grid-template-columns: 216px 1fr; }
+  #app { display: none; min-height: 100vh; grid-template-columns: 252px 1fr; }
   #app.show { display: grid; }
   .sidebar {
-    background: var(--sidebar); border-right: 1px solid var(--border); padding: 18px 10px;
-    display: flex; flex-direction: column;
+    background: linear-gradient(180deg, rgba(6,8,12,0.96), rgba(6,8,12,0.88));
+    border-right: 1px solid var(--border); padding: 16px 12px;
+    display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto;
   }
-  .brand { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 14px; padding: 8px 10px 22px; }
+  .brand { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 15px; letter-spacing: -0.015em; padding: 8px 10px 20px; }
   .brand .mark {
-    width: 22px; height: 22px; border-radius: 7px; flex: none;
+    width: 28px; height: 28px; border-radius: 9px; flex: none;
     background: linear-gradient(135deg, var(--accent), var(--accent-deep));
+    box-shadow: 0 6px 20px -6px rgba(var(--accent-rgb), 0.7);
     display: flex; align-items: center; justify-content: center;
   }
-  .brand .mark svg { width: 13px; height: 13px; }
+  .brand .mark svg { width: 15px; height: 15px; }
+  .nav-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted2); padding: 16px 12px 7px; }
   .nav-item {
-    display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 8px;
-    color: var(--muted); cursor: pointer; margin-bottom: 1px; font-size: 13.5px;
-    transition: background 0.2s var(--ease), color 0.2s var(--ease);
+    position: relative; display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px;
+    color: var(--muted); cursor: pointer; margin-bottom: 2px; font-size: 13.5px; font-weight: 500;
+    transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
   }
-  .nav-item svg { width: 16px; height: 16px; flex: none; opacity: 0.85; }
+  .nav-item svg { width: 17px; height: 17px; flex: none; opacity: 0.8; transition: transform 0.25s var(--ease), opacity 0.2s; }
   .nav-item:hover { background: var(--card2-tint); color: var(--text); }
-  .nav-item.active { background: var(--accent-dim); color: var(--accent); }
+  .nav-item:hover svg { transform: scale(1.08); opacity: 1; }
+  .nav-item.active { background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.04)); color: var(--accent); }
   .nav-item.active svg { opacity: 1; }
-  .sidebar-footer { margin-top: auto; padding: 10px 0 0; }
-  .version-tag { text-align: center; font-size: 11px; color: var(--muted2); margin-top: 10px; font-family: "Fira Mono", ui-monospace, monospace; }
-
-  .main { padding: 30px 40px; max-width: 1120px; }
-  .page-title { font-size: 20px; font-weight: 600; margin: 0 0 4px; letter-spacing: -0.01em; }
-  .page-sub { color: var(--muted); font-size: 13px; margin: 0 0 26px; }
-
+  .nav-item::before {
+    content: ""; position: absolute; left: -12px; top: 50%; width: 3px; height: 0; border-radius: 0 3px 3px 0;
+    background: var(--accent); transform: translateY(-50%); transition: height 0.3s var(--ease); box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.9);
+  }
+  .nav-item.active::before { height: 18px; }
+  .nav-item .nav-count {
+    margin-left: auto; font-family: var(--mono); font-size: 10.5px; padding: 1px 7px; border-radius: 999px;
+    background: rgba(255,255,255,0.07); color: var(--text-dim);
+  }
+  .sidebar-footer { margin-top: auto; padding: 14px 0 0; }
+  .version-tag { text-align: center; font-size: 11px; color: var(--muted2); margin-top: 10px; font-family: var(--mono); }
+  .main { min-width: 0; padding: 0 40px 60px; }
+  .topbar {
+    position: sticky; top: 0; z-index: 30; margin: 0 -40px 26px; padding: 14px 40px;
+    display: flex; align-items: center; gap: 14px;
+    background: linear-gradient(180deg, rgba(7,9,13,0.92), rgba(7,9,13,0.72));
+    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
+    border-bottom: 1px solid var(--border);
+  }
+  .crumbs { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
+  .crumbs b { color: var(--text); font-weight: 600; }
+  .crumbs .sep { opacity: 0.4; }
+  .topbar-spacer { flex: 1; }
+  .search-pill {
+    display: flex; align-items: center; gap: 10px; min-width: 240px; padding: 8px 12px; border-radius: 10px;
+    background: rgba(255,255,255,0.035); border: 1px solid var(--border); color: var(--muted); cursor: pointer;
+    font-size: 13px; transition: border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
+  }
+  .search-pill:hover { border-color: var(--border-strong); background: rgba(255,255,255,0.06); color: var(--text-dim); }
+  .search-pill svg { width: 15px; height: 15px; }
+  .kbd {
+    margin-left: auto; font-family: var(--mono); font-size: 10.5px; padding: 2px 6px; border-radius: 5px;
+    background: rgba(255,255,255,0.07); border: 1px solid var(--border); color: var(--text-dim);
+  }
+  .accent-dots { display: flex; gap: 7px; align-items: center; }
+  .accent-dot {
+    width: 15px; height: 15px; border-radius: 50%; cursor: pointer; border: 2px solid transparent;
+    transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
+  }
+  .accent-dot:hover { transform: scale(1.2); }
+  .accent-dot.active { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,0.12); }
+  .live-pill { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); font-family: var(--mono); }
+  .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(61,220,132,0.6); animation: livePulse 2s ease-out infinite; }
+  @keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(61,220,132,0.55); } 70% { box-shadow: 0 0 0 9px rgba(61,220,132,0); } 100% { box-shadow: 0 0 0 0 rgba(61,220,132,0); } }
+  .content { max-width: 1180px; margin: 0 auto; }
+  .page-title { font-size: 24px; font-weight: 700; margin: 0 0 6px; letter-spacing: -0.025em; }
+  .page-sub { color: var(--muted); font-size: 13.5px; margin: 0 0 26px; line-height: 1.55; }
   .view { display: none; }
-  .view.active { display: block; }
-
-  .reveal {
-    opacity: 0; animation: fadeIn 0.25s linear forwards;
-  }
-
-  .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 30px; }
+  .view.active { display: block; animation: viewIn 0.45s var(--ease); }
+  @keyframes viewIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
+  .reveal { opacity: 0; animation: fadeIn 0.3s linear forwards; }
+  .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 28px; }
   .stat-card {
-    background: var(--bg); position: relative; padding: 14px 18px 16px;
-    transition: background 0.2s var(--ease);
+    position: relative; padding: 16px 18px 18px; border-radius: 14px; overflow: hidden;
+    background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.016));
+    border: 1px solid var(--border); box-shadow: var(--shadow-card);
+    transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
   }
-  .stat-card::before { content: ""; position: absolute; inset: 0; background: var(--card-tint); }
-  .stat-card:hover::before { background: var(--card2-tint); }
-  .stat-card > * { position: relative; }
-  .stat-card .l { color: var(--muted); font-size: 11.5px; margin-bottom: 10px; }
-  .stat-card .row { display: flex; align-items: center; gap: 8px; }
-  .stat-card svg { width: 16px; height: 16px; flex: none; }
-  .stat-card .v { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; font-family: "Fira Mono", ui-monospace, monospace; }
-
+  .stat-card::after {
+    content: ""; position: absolute; inset: auto -30% -70% auto; width: 160px; height: 160px; border-radius: 50%;
+    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.16), transparent 65%); opacity: 0; transition: opacity 0.4s var(--ease);
+  }
+  .stat-card:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: 0 22px 44px -22px rgba(0,0,0,0.95); }
+  .stat-card:hover::after { opacity: 1; }
+  .stat-card > * { position: relative; z-index: 1; }
+  .stat-card .l { color: var(--muted); font-size: 12px; margin-bottom: 14px; font-weight: 500; }
+  .stat-card .row { display: flex; align-items: center; gap: 12px; }
+  .stat-card .ico { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.05); flex: none; }
+  .stat-card svg { width: 17px; height: 17px; flex: none; }
+  .stat-card .v { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; font-family: var(--mono); line-height: 1; }
+  .stat-card .sub { font-size: 11.5px; color: var(--muted2); margin-top: 10px; font-family: var(--mono); }
+  .panel {
+    position: relative; border-radius: 14px; padding: 18px 20px;
+    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.014));
+    border: 1px solid var(--border); box-shadow: var(--shadow-card);
+  }
+  .panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 10px; }
+  .panel-head h2 { font-size: 14px; margin: 0; font-weight: 650; letter-spacing: -0.01em; }
+  .grid-2 { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; margin-bottom: 28px; }
   table { width: 100%; border-collapse: collapse; }
   .table-wrap {
-    background: var(--card-tint); border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
+    background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
+    border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-card);
+    overflow-x: auto;
   }
   th {
-    text-align: left; font-size: 12px; color: var(--muted); font-weight: 500;
-    padding: 12px 16px; border-bottom: 1px solid var(--border); text-transform: uppercase; letter-spacing: 0.04em;
+    text-align: left; font-size: 11px; color: var(--muted2); font-weight: 600;
+    padding: 12px 16px; border-bottom: 1px solid var(--border); text-transform: uppercase; letter-spacing: 0.08em;
+    background: rgba(255,255,255,0.015); white-space: nowrap;
   }
   td { padding: 13px 16px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
   tr:last-child td { border-bottom: none; }
-  tbody tr { transition: background 0.15s var(--ease); }
-  tbody tr:hover { background: var(--card2-tint); }
-
+  tbody tr { transition: background 0.15s var(--ease), box-shadow 0.2s var(--ease); }
+  tbody tr:hover { background: var(--card2-tint); box-shadow: inset 2px 0 0 var(--accent); }
   .badge {
-    display: inline-block; padding: 2px 9px; border-radius: var(--radius); font-size: 11.5px; font-weight: 600;
-    border: 1px solid; background: transparent;
+    display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
+    border: 1px solid; background: transparent; white-space: nowrap;
   }
-  .badge.ok { border-color: rgba(63,185,80,0.4); color: var(--green); }
-  .badge.bad { border-color: rgba(248,81,73,0.4); color: var(--red); }
-  .badge.warn { border-color: rgba(210,153,34,0.4); color: var(--yellow); }
-
+  .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+  .badge.ok { border-color: rgba(61,220,132,0.32); color: var(--green); background: rgba(61,220,132,0.07); }
+  .badge.bad { border-color: rgba(255,93,108,0.32); color: var(--red); background: rgba(255,93,108,0.07); }
+  .badge.warn { border-color: rgba(245,184,61,0.34); color: var(--yellow); background: rgba(245,184,61,0.07); }
+  .badge.info { border-color: rgba(var(--accent-rgb), 0.34); color: var(--accent); background: rgba(var(--accent-rgb), 0.07); }
+  .badge.plain::before { display: none; }
   .section { margin-bottom: 32px; }
   .section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
-  .section-head h2 { font-size: 15px; margin: 0; font-weight: 600; }
-
-  .check-row { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 14px; }
-  .check { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; cursor: pointer; }
-  .check input { margin-top: 2px; accent-color: var(--accent); }
+  .section-head h2 { font-size: 15px; margin: 0; font-weight: 650; letter-spacing: -0.01em; }
+  .check-row { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 16px; }
+  .check { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; cursor: pointer; }
+  .check input[type=checkbox] {
+    appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin: 1px 0 0; cursor: pointer;
+    border-radius: 6px; border: 1.5px solid var(--border-strong); background: rgba(255,255,255,0.03);
+    display: grid; place-content: center; transition: background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.15s var(--ease);
+  }
+  .check input[type=checkbox]::after {
+    content: ""; width: 9px; height: 5px; border-left: 2px solid #031116; border-bottom: 2px solid #031116;
+    transform: rotate(-45deg) scale(0); margin-top: -2px; transition: transform 0.2s var(--ease);
+  }
+  .check input[type=checkbox]:checked { background: var(--accent); border-color: var(--accent); }
+  .check input[type=checkbox]:checked::after { transform: rotate(-45deg) scale(1); }
+  .check input[type=checkbox]:active { transform: scale(0.9); }
   .check-hint { color: var(--muted); font-size: 12px; }
-  .form-row { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
+  .form-row { display: flex; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
   .form-row > * { flex: 1; min-width: 140px; }
-  label.f { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
-
-  /* ---------- Custom dropdown (replaces native <select> — no OS-rendered white
-     popup, animated open/close) ---------- */
+  label.f { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; font-weight: 500; }
+  .switch { position: relative; display: inline-block; width: 38px; height: 22px; flex: none; }
+  .switch input { opacity: 0; width: 0; height: 0; position: absolute; }
+  .switch .track {
+    position: absolute; inset: 0; border-radius: 999px; background: rgba(255,255,255,0.09); border: 1px solid var(--border-strong);
+    cursor: pointer; transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
+  }
+  .switch .track::after {
+    content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #cfd6e0;
+    transition: transform 0.3s var(--ease), background 0.2s ease;
+  }
+  .switch input:checked + .track { background: rgba(var(--accent-rgb), 0.28); border-color: var(--accent-border); }
+  .switch input:checked + .track::after { transform: translateX(16px); background: var(--accent); box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.8); }
+  .switch input:focus-visible + .track { outline: 2px solid rgba(var(--accent-rgb), 0.7); outline-offset: 2px; }
   .dd { position: relative; }
   .dd-trigger {
     width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
-    background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: var(--radius);
+    background: rgba(255,255,255,0.035); border: 1px solid var(--border); border-radius: var(--radius);
     padding: 11px 13px; color: var(--text); cursor: pointer; text-align: left;
-    transition: border-color 0.2s var(--ease);
+    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
   }
-  .dd-trigger:hover { border-color: var(--border-strong); }
-  .dd.dd-open .dd-trigger { border-color: var(--accent); }
+  .dd-trigger:hover { border-color: var(--border-strong); background: rgba(255,255,255,0.055); }
+  .dd.dd-open .dd-trigger { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.16); }
   .dd-trigger-label.placeholder { color: var(--muted); }
-  .dd-chevron { width: 15px; height: 15px; color: var(--muted); flex: none; transition: transform 0.2s var(--ease); }
+  .dd-chevron { width: 15px; height: 15px; color: var(--muted); flex: none; transition: transform 0.25s var(--ease); }
   .dd.dd-open .dd-chevron { transform: rotate(180deg); }
   .dd-menu {
-    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
-    background: #161b22; border: 1px solid var(--border-strong); border-radius: 10px;
-    padding: 6px; max-height: 264px; overflow: hidden; display: flex; flex-direction: column;
-    box-shadow: 0 12px 32px rgba(0,0,0,0.45);
-    opacity: 0; transform: translateY(-6px) scale(0.98); filter: blur(3px);
-    pointer-events: none; transition: opacity 0.16s var(--ease), transform 0.16s var(--ease), filter 0.16s var(--ease);
+    position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
+    background: #121823; border: 1px solid var(--border-strong); border-radius: 12px;
+    padding: 6px; max-height: 270px; overflow: hidden; display: flex; flex-direction: column;
+    box-shadow: var(--shadow-pop);
+    opacity: 0; transform: translateY(-8px) scale(0.97); filter: blur(3px);
+    pointer-events: none; transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), filter 0.18s var(--ease);
   }
   .dd-menu.show { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); pointer-events: auto; }
   .dd-menu.closing { opacity: 0; transform: translateY(-4px) scale(0.99); filter: blur(2px); }
   .dd-search {
-    background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 7px;
+    background: rgba(255,255,255,0.035); border: 1px solid var(--border); border-radius: 8px;
     padding: 8px 10px; color: var(--text); margin-bottom: 6px; flex: none; width: 100%;
   }
   .dd-search:focus { outline: none; border-color: var(--accent); }
   .dd-list { overflow-y: auto; }
-  .dd-option { padding: 9px 10px; border-radius: 7px; cursor: pointer; font-size: 13.5px; transition: background 0.12s var(--ease); }
-  .dd-option:hover { background: var(--card2-tint); }
-  .dd-option.selected { color: var(--accent); }
+  .dd-option { padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 13.5px; transition: background 0.12s var(--ease), padding-left 0.2s var(--ease); }
+  .dd-option:hover { background: var(--card2-tint); padding-left: 14px; }
+  .dd-option.selected { color: var(--accent); background: var(--accent-dim); }
   .dd-empty { padding: 10px; color: var(--muted); font-size: 13px; text-align: center; }
-
-  .tabs { display: flex; gap: 4px; margin-bottom: 18px; background: var(--card-tint); border: 1px solid var(--border); padding: 4px; border-radius: 10px; width: fit-content; }
-  .tab { padding: 8px 16px; border-radius: 7px; cursor: pointer; color: var(--muted); font-size: 13px; transition: all 0.2s var(--ease); }
-  .tab.active { background: var(--card2-tint); color: var(--text); }
-
+  .tabs { position: relative; display: flex; gap: 4px; margin-bottom: 18px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); padding: 4px; border-radius: 12px; width: fit-content; }
+  .tab { padding: 8px 16px; border-radius: 9px; cursor: pointer; color: var(--muted); font-size: 13px; font-weight: 500; transition: all 0.25s var(--ease); }
+  .tab:hover { color: var(--text); }
+  .tab.active { background: rgba(255,255,255,0.08); color: var(--text); box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 6px 16px -8px rgba(0,0,0,0.8); }
   .code-box {
-    background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px;
-    font-family: "Fira Mono", ui-monospace, monospace; font-size: 12.5px; color: var(--accent);
+    background: rgba(0,0,0,0.35); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 76px 14px 14px;
+    font-family: var(--mono); font-size: 12.5px; color: var(--accent);
     word-break: break-all; position: relative;
   }
   .doc-block { margin-bottom: 30px; padding-bottom: 26px; border-bottom: 1px solid var(--border); }
   .doc-block:last-child { border-bottom: none; }
-  .doc-block h2 { font-size: 16px; margin: 0 0 12px; font-weight: 600; }
-  .doc-block p { font-size: 13.5px; color: var(--text-dim); line-height: 1.65; margin: 0 0 10px; }
-  .doc-block code { background: rgba(255,255,255,0.06); padding: 1px 6px; border-radius: 5px; font-family: "Fira Mono", ui-monospace, monospace; font-size: 12px; }
+  .doc-block h2 { font-size: 16px; margin: 0 0 12px; font-weight: 650; letter-spacing: -0.015em; }
+  .doc-block h3 { font-size: 14px; margin: 18px 0 8px; font-weight: 650; }
+  .doc-block p { font-size: 13.5px; color: var(--text-dim); line-height: 1.7; margin: 0 0 10px; }
+  .doc-block code { background: rgba(255,255,255,0.07); padding: 1px 6px; border-radius: 5px; font-size: 12px; }
   .copy-btn {
     position: absolute; top: 8px; right: 8px; background: var(--card2-tint); border: 1px solid var(--border);
-    color: var(--muted); border-radius: 6px; padding: 4px 8px; font-size: 11px; cursor: pointer;
+    color: var(--muted); border-radius: 7px; padding: 4px 9px; font-size: 11px; cursor: pointer; transition: all 0.15s;
   }
-  .copy-btn:hover { color: var(--text); }
-
-  .muted-btn { background: none; border: 1px solid transparent; color: var(--muted); cursor: pointer; padding: 4px 8px; border-radius: 6px; font-size: 12.5px; transition: all 0.15s ease; }
+  .copy-btn:hover { color: var(--text); border-color: var(--border-strong); }
+  .muted-btn { background: none; border: 1px solid transparent; color: var(--muted); cursor: pointer; padding: 4px 9px; border-radius: 7px; font-size: 12.5px; transition: all 0.15s ease; }
   .muted-btn:hover { color: var(--accent); border-color: var(--accent-border); background: var(--accent-dim); }
-
-  .empty { text-align: center; color: var(--muted); padding: 40px 0; font-size: 13px; }
-
-  .drag-handle { cursor: grab; color: var(--muted); text-align: center; user-select: none; font-size: 15px; }
+  .muted-btn.red:hover { color: var(--red); border-color: rgba(255,93,108,0.35); background: rgba(255,93,108,0.08); }
+  .empty { text-align: center; color: var(--muted); padding: 44px 0; font-size: 13px; }
+  .drag-handle { cursor: grab; color: var(--muted2); text-align: center; user-select: none; font-size: 15px; transition: color 0.15s; }
+  tr:hover .drag-handle { color: var(--accent); }
   .draggable-row.dragging { opacity: 0.4; }
   .draggable-row.drag-over { box-shadow: inset 0 2px 0 var(--accent); }
   .draggable-row:active .drag-handle { cursor: grabbing; }
-
   .modal-overlay {
-    position: fixed; inset: 0; background: rgba(1,4,9,0.6); backdrop-filter: blur(2px);
+    position: fixed; inset: 0; background: rgba(2,4,8,0.66); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
     display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 100;
-    opacity: 0; pointer-events: none; transition: opacity 0.18s var(--ease);
+    opacity: 0; pointer-events: none; transition: opacity 0.2s var(--ease);
   }
   .modal-overlay.show { opacity: 1; pointer-events: auto; }
   .modal-card {
     width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto;
-    background: #161b22; border: 1px solid var(--border-strong); border-radius: 14px; padding: 22px;
-    box-shadow: 0 24px 64px rgba(0,0,0,0.5);
-    opacity: 0; transform: translateY(10px) scale(0.98); filter: blur(4px);
-    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), filter 0.2s var(--ease);
+    background: linear-gradient(180deg, #151b26, #10151e); border: 1px solid var(--border-strong); border-radius: 18px; padding: 24px;
+    box-shadow: var(--shadow-pop);
+    opacity: 0; transform: translateY(14px) scale(0.97); filter: blur(4px);
+    transition: opacity 0.25s var(--ease), transform 0.3s var(--ease), filter 0.25s var(--ease);
   }
-  .modal-card-lg { max-width: 620px; }
+  .modal-card-lg { max-width: 640px; }
   .uc-sub-row {
     display: flex; align-items: center; justify-content: space-between; gap: 10px;
-    padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px;
-    font-size: 13.5px;
+    padding: 11px 13px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px;
+    font-size: 13.5px; background: rgba(255,255,255,0.02);
   }
   .modal-overlay.show .modal-card { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
-  .modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
-  .modal-head h2 { font-size: 16px; margin: 0; font-weight: 600; }
-  .modal-close { background: none; border: none; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
+  .modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
+  .modal-head h2 { font-size: 16px; margin: 0; font-weight: 650; }
+  .modal-close { background: none; border: none; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 2px 8px; border-radius: 7px; transition: all 0.15s; }
   .modal-close:hover { color: var(--text); background: var(--card2-tint); }
-  .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
-
+  .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
   .device-row {
     display: flex; align-items: center; justify-content: space-between; gap: 10px;
-    padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px;
-    font-size: 13.5px;
+    padding: 11px 13px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px;
+    font-size: 13.5px; background: rgba(255,255,255,0.02);
   }
   .devices-list { max-height: 260px; overflow-y: auto; margin: 4px 0 16px; }
-
+  #toast-stack { position: fixed; right: 22px; bottom: 22px; z-index: 300; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
+  .toast {
+    position: relative; overflow: hidden; pointer-events: auto; display: flex; align-items: flex-start; gap: 12px;
+    min-width: 280px; max-width: 400px; padding: 13px 16px; border-radius: 12px;
+    background: rgba(18,24,35,0.94); border: 1px solid var(--border-strong); box-shadow: var(--shadow-pop);
+    backdrop-filter: blur(14px); font-size: 13.5px; line-height: 1.45;
+    animation: toastIn 0.45s var(--ease) both;
+  }
+  .toast.out { animation: toastOut 0.3s var(--ease) forwards; }
+  .toast .t-ico { width: 20px; height: 20px; flex: none; margin-top: 1px; }
+  .toast.success .t-ico { color: var(--green); }
+  .toast.error .t-ico { color: var(--red); }
+  .toast.info .t-ico { color: var(--accent); }
+  .toast.warn .t-ico { color: var(--yellow); }
+  .toast .t-bar { position: absolute; left: 0; bottom: 0; height: 2px; background: currentColor; opacity: 0.7; animation: toastBar linear forwards; }
+  .toast.success .t-bar { color: var(--green); } .toast.error .t-bar { color: var(--red); } .toast.info .t-bar { color: var(--accent); } .toast.warn .t-bar { color: var(--yellow); }
+  @keyframes toastIn { from { opacity: 0; transform: translateX(30px) scale(0.96); } to { opacity: 1; transform: none; } }
+  @keyframes toastOut { to { opacity: 0; transform: translateX(30px) scale(0.96); } }
+  @keyframes toastBar { from { width: 100%; } to { width: 0; } }
+  #cmdk-overlay {
+    position: fixed; inset: 0; z-index: 250; display: none; align-items: flex-start; justify-content: center; padding-top: 14vh;
+    background: rgba(2,4,8,0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
+  }
+  #cmdk-overlay.show { display: flex; animation: fadeIn 0.18s linear; }
+  .cmdk {
+    width: min(620px, calc(100vw - 32px)); border-radius: 16px; overflow: hidden;
+    background: linear-gradient(180deg, #151c28, #0f141d); border: 1px solid var(--border-strong); box-shadow: var(--shadow-pop);
+    animation: cmdkIn 0.3s var(--ease);
+  }
+  @keyframes cmdkIn { from { opacity: 0; transform: translateY(-14px) scale(0.97); } to { opacity: 1; transform: none; } }
+  .cmdk-input-wrap { display: flex; align-items: center; gap: 12px; padding: 4px 18px; border-bottom: 1px solid var(--border); }
+  .cmdk-input-wrap svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
+  #cmdk-input { background: transparent !important; border: none !important; box-shadow: none !important; margin: 0 !important; padding: 15px 0 !important; font-size: 15px; }
+  .cmdk-list { max-height: 360px; overflow-y: auto; padding: 8px; }
+  .cmdk-group { font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted2); padding: 10px 12px 6px; }
+  .cmdk-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; font-size: 13.5px; color: var(--text-dim); }
+  .cmdk-item svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
+  .cmdk-item .hint { margin-left: auto; font-size: 11.5px; color: var(--muted2); }
+  .cmdk-item.sel { background: var(--accent-dim); color: var(--text); }
+  .cmdk-item.sel svg { color: var(--accent); }
+  .cmdk-foot { display: flex; gap: 16px; padding: 10px 18px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--muted2); }
+  .skeleton { position: relative; overflow: hidden; background: rgba(255,255,255,0.045); border-radius: 8px; min-height: 14px; }
+  .skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent); animation: shimmer 1.4s infinite; }
+  @keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
+  .pill-ms { font-family: var(--mono); font-size: 11.5px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-dim); white-space: nowrap; }
+  .pill-ms.good { color: var(--green); border-color: rgba(61,220,132,0.3); background: rgba(61,220,132,0.07); }
+  .pill-ms.mid { color: var(--yellow); border-color: rgba(245,184,61,0.32); background: rgba(245,184,61,0.07); }
+  .pill-ms.bad { color: var(--red); border-color: rgba(255,93,108,0.32); background: rgba(255,93,108,0.07); }
+  .net-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); }
+  .net-row:last-child { border-bottom: none; }
+  .net-row .name { font-weight: 600; font-size: 13.5px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .net-row .addr { font-family: var(--mono); font-size: 11.5px; color: var(--muted2); }
+  .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted2); flex: none; }
+  .dot.on { background: var(--green); box-shadow: 0 0 10px rgba(61,220,132,0.7); }
+  .dot.off { background: var(--red); box-shadow: 0 0 10px rgba(255,93,108,0.6); }
+  .dot.wait { background: var(--yellow); animation: livePulse 1.6s ease-out infinite; }
+  .audit-pill { font-family: var(--mono); font-size: 11px; padding: 3px 9px; border-radius: 7px; background: rgba(255,255,255,0.06); color: var(--text-dim); white-space: nowrap; }
+  .audit-pill.login { background: rgba(var(--accent-rgb), 0.12); color: var(--accent); }
+  .audit-pill.warn { background: rgba(255,93,108,0.12); color: var(--red); }
+  .audit-pill.node { background: rgba(90,169,255,0.12); color: var(--blue); }
+  .audit-pill.chain { background: rgba(245,184,61,0.12); color: var(--yellow); }
+  .audit-pill.sub { background: rgba(61,220,132,0.1); color: var(--green); }
+  .audit-pill.settings { background: rgba(240,106,176,0.12); color: var(--pink); }
+  .cb-layout { display: block; margin-bottom: 30px; }
+  .cb-scroll { overflow-x: auto; border-radius: 18px; }
+  .cb-canvas {
+    position: relative; min-width: 760px; min-height: 440px; padding: 26px 22px; border-radius: 18px; overflow: hidden;
+    border: 1px solid var(--border-strong);
+    background:
+      radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb), 0.07), transparent 60%),
+      radial-gradient(circle, rgba(255,255,255,0.075) 1px, transparent 1.4px) 0 0 / 22px 22px,
+      linear-gradient(180deg, #0c1119, #090d13);
+    box-shadow: var(--shadow-card), inset 0 0 90px rgba(0,0,0,0.55);
+    display: flex; align-items: center; justify-content: space-between; gap: 26px; user-select: none; touch-action: none;
+  }
+  .cb-canvas.dragging { cursor: grabbing; }
+  .cb-wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; overflow: visible; }
+  .cb-wire { fill: none; stroke: rgba(var(--accent-rgb), 0.9); stroke-width: 2.5; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.7)); }
+  .cb-wire.flow { stroke-dasharray: 9 9; animation: wireFlow 0.9s linear infinite; }
+  .cb-wire.warn { stroke: var(--yellow); filter: drop-shadow(0 0 7px rgba(245,184,61,0.75)); }
+  .cb-wire.high { stroke: var(--red); filter: drop-shadow(0 0 7px rgba(255,93,108,0.75)); }
+  .cb-wire.live { stroke-dasharray: 3 7; opacity: 0.85; animation: wireFlow 0.5s linear infinite; }
+  .cb-wire.retract { animation: wireRetract 0.35s var(--ease) forwards; }
+  .cb-wire-under { fill: none; stroke: rgba(255,255,255,0.06); stroke-width: 7; stroke-linecap: round; }
+  .cb-packet { fill: #fff; filter: drop-shadow(0 0 6px rgba(255,255,255,0.95)); }
+  @keyframes wireFlow { to { stroke-dashoffset: -18; } }
+  @keyframes wireRetract { to { opacity: 0; stroke-width: 0.5; } }
+  .cb-node {
+    position: relative; z-index: 2; border-radius: 14px; padding: 12px 14px; display: flex; align-items: center; gap: 11px;
+    background: linear-gradient(180deg, #161d29, #111722); border: 1px solid var(--border-strong);
+    box-shadow: 0 14px 30px -16px rgba(0,0,0,0.9), 0 1px 0 rgba(255,255,255,0.05) inset;
+    transition: transform 0.3s var(--ease), border-color 0.25s var(--ease), box-shadow 0.3s var(--ease), opacity 0.25s;
+  }
+  .cb-node .ico { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex: none; background: rgba(255,255,255,0.06); font-size: 20px; }
+  .cb-node .ico svg { width: 20px; height: 20px; }
+  .cb-node .nm { font-weight: 650; font-size: 13.5px; line-height: 1.25; }
+  .cb-node .ad { font-family: var(--mono); font-size: 10.5px; color: var(--muted2); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
+  .cb-endpoint { flex-direction: column; text-align: center; padding: 18px 16px; min-width: 118px; gap: 9px; }
+  .cb-endpoint .ico { width: 50px; height: 50px; border-radius: 15px; }
+  .cb-endpoint .ico svg { width: 26px; height: 26px; }
+  .cb-client { cursor: grab; }
+  .cb-client .ico { background: rgba(var(--accent-rgb), 0.14); color: var(--accent); }
+  .cb-internet .ico { background: rgba(90,169,255,0.14); color: var(--blue); }
+  .cb-pool-wrap { flex: 1; min-width: 0; align-self: stretch; display: flex; flex-direction: column; }
+  .cb-pool-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted2); text-align: center; margin-bottom: 10px; }
+  .cb-pool {
+    flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; align-content: center;
+    padding: 16px; border-radius: 16px; border: 1.5px dashed rgba(255,255,255,0.1); background: rgba(255,255,255,0.012);
+  }
+  .cb-server { cursor: pointer; }
+  .cb-server:hover { transform: translateY(-3px); border-color: rgba(var(--accent-rgb), 0.5); }
+  .cb-server.in-chain { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 34px -4px rgba(var(--accent-rgb), 0.55), 0 14px 30px -16px rgba(0,0,0,0.9); animation: snapPop 0.45s var(--ease); }
+  .cb-server.target { border-color: #fff; transform: translateY(-4px) scale(1.04); box-shadow: 0 0 0 1px #fff, 0 0 40px rgba(255,255,255,0.3); }
+  .cb-node.target::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 3px; border-radius: 3px; background: var(--accent); box-shadow: 0 0 10px var(--accent); transform-origin: left; animation: charge 0.24s linear forwards; }
+  @keyframes charge { from { transform: scaleX(0); } to { transform: scaleX(1); } }
+  .cb-server.locked { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.7); }
+  .cb-server.shake { animation: shake 0.45s var(--ease); border-color: var(--red); }
+  .cb-internet.target { border-color: #fff; transform: scale(1.06); box-shadow: 0 0 0 1px #fff, 0 0 40px rgba(255,255,255,0.3); }
+  .cb-internet.linked { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue), 0 0 34px -4px rgba(90,169,255,0.55); }
+  .cb-client.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 34px -4px rgba(var(--accent-rgb), 0.55); }
+  @keyframes snapPop { 0% { transform: scale(0.94); } 55% { transform: scale(1.06); } 100% { transform: scale(1); } }
+  @keyframes shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(4px); } }
+  .cb-badge {
+    position: absolute; top: -9px; left: -9px; width: 22px; height: 22px; border-radius: 50%; display: none; align-items: center; justify-content: center;
+    background: var(--accent); color: #031116; font-size: 11.5px; font-weight: 800; font-family: var(--mono); box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.6);
+  }
+  .cb-server.in-chain .cb-badge { display: flex; animation: snapPop 0.45s var(--ease); }
+  .cb-x { position: absolute; top: -9px; right: -9px; width: 22px; height: 22px; border-radius: 50%; display: none; align-items: center; justify-content: center; background: #2a3140; color: var(--text); font-size: 13px; cursor: pointer; border: 1px solid var(--border-strong); }
+  .cb-server.in-chain .cb-x { display: flex; }
+  .cb-x:hover { background: var(--red); color: #fff; }
+  .cb-port {
+    position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; transform: translateY(-50%);
+    background: #0b0f16; border: 2px solid var(--muted2); transition: all 0.25s var(--ease); z-index: 3;
+  }
+  .cb-port.out { right: -8px; } .cb-port.in { left: -8px; }
+  .cb-node.in-chain .cb-port, .cb-client.active .cb-port.out, .cb-internet.linked .cb-port { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.9); }
+  .cb-tail-port { cursor: crosshair; }
+  .cb-node.tail .cb-port.out { animation: portPulse 1.4s ease-out infinite; border-color: var(--accent); }
+  @keyframes portPulse { 0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.7); } 100% { box-shadow: 0 0 0 12px rgba(var(--accent-rgb), 0); } }
+  .cb-lat { font-family: var(--mono); font-size: 10px; margin-top: 4px; color: var(--muted2); }
+  .cb-hint { text-align: center; margin-top: 12px; font-size: 12px; color: var(--muted); }
+  .cb-hint b { color: var(--accent); font-weight: 600; }
+  .cb-inspector { margin-top: 16px; }
+  .cb-inspector-body { display: grid; grid-template-columns: 220px minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
+  .cb-steps { display: flex; flex-direction: column; gap: 0; margin: 4px 0 16px; }
+  .cb-step { display: flex; align-items: center; gap: 12px; padding: 9px 0; font-size: 13px; color: var(--muted); position: relative; }
+  .cb-step:not(:last-child)::after { content: ""; position: absolute; left: 10px; top: 32px; width: 2px; height: calc(100% - 14px); background: var(--border-strong); }
+  .cb-step .st { width: 22px; height: 22px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--border-strong); background: var(--surface); font-size: 11px; font-family: var(--mono); z-index: 1; transition: all 0.3s var(--ease); }
+  .cb-step.done { color: var(--text); }
+  .cb-step.done .st { background: var(--accent); border-color: var(--accent); color: #031116; box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.6); }
+  .cb-step.done:not(:last-child)::after { background: var(--accent); }
+  .cb-callout { display: flex; gap: 11px; padding: 12px 14px; border-radius: 12px; font-size: 12.5px; line-height: 1.5; margin-bottom: 14px; border: 1px solid; animation: calloutIn 0.45s var(--ease); }
+  .cb-callout svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
+  .cb-callout.info { color: var(--text-dim); border-color: var(--border-strong); background: rgba(255,255,255,0.03); }
+  .cb-callout.warn { color: #ffd98a; border-color: rgba(245,184,61,0.4); background: rgba(245,184,61,0.08); }
+  .cb-callout.high { color: #ffb3ba; border-color: rgba(255,93,108,0.45); background: rgba(255,93,108,0.09); }
+  .cb-callout.ok { color: #a6f0c4; border-color: rgba(61,220,132,0.35); background: rgba(61,220,132,0.07); }
+  @keyframes calloutIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
+  .chain-card { display: flex; align-items: center; gap: 18px; padding: 16px 18px; border-radius: 14px; margin-bottom: 12px; background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.014)); border: 1px solid var(--border); box-shadow: var(--shadow-card); transition: border-color 0.25s var(--ease), transform 0.25s var(--ease); flex-wrap: wrap; }
+  .chain-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
+  .chain-card.off { opacity: 0.6; }
+  .chain-path { display: flex; align-items: center; flex: 1; min-width: 320px; }
+  .cp-node { display: flex; align-items: center; gap: 8px; padding: 7px 11px; border-radius: 10px; background: rgba(255,255,255,0.05); border: 1px solid var(--border); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
+  .cp-node svg { width: 15px; height: 15px; }
+  .cp-link { flex: 1; min-width: 26px; height: 2px; margin: 0 6px; background: repeating-linear-gradient(90deg, rgba(var(--accent-rgb), 0.95) 0 6px, transparent 6px 12px); background-size: 24px 2px; animation: linkFlow 0.8s linear infinite; border-radius: 2px; }
+  .chain-card.off .cp-link { animation: none; background: var(--border-strong); }
+  @keyframes linkFlow { to { background-position: 24px 0; } }
+  .chain-meta { display: flex; flex-direction: column; gap: 3px; min-width: 150px; }
+  .chain-meta .t { font-weight: 600; font-size: 13.5px; }
+  .chain-meta .s { font-family: var(--mono); font-size: 11px; color: var(--muted2); }
+  .chain-actions { display: flex; align-items: center; gap: 10px; }
+  @media (max-width: 1100px) {
+    .stat-grid { grid-template-columns: repeat(2, 1fr); }
+    .grid-2 { grid-template-columns: 1fr; }
+    .cb-inspector-body { grid-template-columns: 1fr; gap: 14px; }
+  }
+  @media (max-width: 820px) {
+    #app { grid-template-columns: 1fr; }
+    .sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; gap: 4px; padding: 10px; }
+    .sidebar .nav-label, .sidebar-footer .version-tag { display: none; }
+    .brand { padding: 4px 8px; width: 100%; }
+    .main { padding: 0 16px 40px; }
+    .topbar { margin: 0 -16px 18px; padding: 12px 16px; }
+    .search-pill { min-width: 0; }
+  }
   @media (prefers-reduced-motion: reduce) {
-    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
+    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
     .reveal, .login-card, .splash-mark, .splash-title, .splash-tagline, .modal-overlay, .modal-card { opacity: 1 !important; transform: none !important; filter: none !important; }
   }
+  .cb-dot { fill: var(--accent); filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.9)); }
+  td.act { white-space: nowrap; }
+  .form-row > .btn { flex: 0 0 auto; }
+  .users-bar { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; align-items: flex-end; }
+  .users-bar > .grow { flex: 1; min-width: 220px; }
+  .users-bar input { margin-bottom: 0; }
 </style>
 </head>
 <body>
@@ -301,40 +609,80 @@
 <div id="app">
   <div class="sidebar">
     <div class="brand"><div class="mark"><svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.2" stroke-linecap="round"><line x1="6" y1="16" x2="6" y2="8"/><line x1="12" y1="19" x2="12" y2="5"/><line x1="18" y1="14" x2="18" y2="10"/></svg></div><span id="sidebar-brand-name">MBS Panel</span></div>
+    <div class="nav-label">Обзор</div>
     <div class="nav-item active" data-view="dashboard" onclick="showView('dashboard')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg>Дашборд</div>
+    <div class="nav-label">Сеть</div>
+    <div class="nav-item" data-view="nodes" onclick="showView('nodes')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="6" rx="1.5"/><rect x="3" y="14" width="18" height="6" rx="1.5"/><line x1="7" y1="7" x2="7.01" y2="7"/><line x1="7" y1="17" x2="7.01" y2="17"/></svg>Ноды</div>
+    <div class="nav-item" data-view="chains" onclick="showView('chains')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1"/><path d="M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1"/></svg>Цепочки<span class="nav-count" id="nav-chains-count"></span></div>
+    <div class="nav-item" data-view="traffic" onclick="showView('traffic')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3,13 8,13 10,7 14,19 16,13 21,13"/></svg>Трафик</div>
+    <div class="nav-label">Продажи</div>
+    <div class="nav-item" data-view="users" onclick="showView('users')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8" r="3.2"/><path d="M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6"/><circle cx="17.5" cy="9" r="2.4"/><path d="M21 20c0-2.6-1.8-4.8-4.2-5.5"/></svg>Юзеры</div>
     <div class="nav-item" data-view="subscriptions" onclick="showView('subscriptions')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"/><line x1="7" y1="9" x2="17" y2="9"/><line x1="7" y1="13" x2="17" y2="13"/><line x1="7" y1="17" x2="13" y2="17"/></svg>Подписки</div>
     <div class="nav-item" data-view="gifts" onclick="showView('gifts')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="8" width="18" height="13" rx="1.5"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="12" y1="8" x2="12" y2="21"/><path d="M12 8c-1.2 0-2.3-1.3-2.3-2.6C9.7 4 10.6 3 11.6 3c1.4 0 2.4 2 .4 5"/><path d="M12 8c1.2 0 2.3-1.3 2.3-2.6C14.3 4 13.4 3 12.4 3c-1.4 0-2.4 2-.4 5"/></svg>Гифт-коды</div>
-    <div class="nav-item" data-view="nodes" onclick="showView('nodes')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="6" rx="1.5"/><rect x="3" y="14" width="18" height="6" rx="1.5"/><line x1="7" y1="7" x2="7.01" y2="7"/><line x1="7" y1="17" x2="7.01" y2="17"/></svg>Ноды</div>
-    <div class="nav-item" data-view="traffic" onclick="showView('traffic')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3,13 8,13 10,7 14,19 16,13 21,13"/></svg>Трафик</div>
     <div class="nav-item" data-view="payments" onclick="showView('payments')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>Платежи</div>
+    <div class="nav-label">Система</div>
+    <div class="nav-item" data-view="audit" onclick="showView('audit')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><polyline points="12,7 12,12 15.5,14"/></svg>Журнал</div>
     <div class="nav-item" data-view="docs" onclick="showView('docs')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14,2 14,8 20,8"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="16" y2="17"/></svg>Документация</div>
     <div class="nav-item" data-view="settings" onclick="showView('settings')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>Настройки</div>
     <div class="sidebar-footer">
       <div class="version-tag" id="logged-in-as" style="margin-bottom:6px"></div>
       <button class="btn ghost" style="width:100%" onclick="logout()">Выйти</button>
-      <div class="version-tag">MBS Panel v1.2.0 · <a href="https://github.com/devsavsis/mbs-panel/releases/latest" target="_blank" style="color:inherit">обновления</a></div>
+      <div class="version-tag">MBS Panel v1.6.0 · <a href="https://github.com/devsavsis/mbs-panel/releases/latest" target="_blank" style="color:inherit">обновления</a></div>
     </div>
   </div>
 
   <div class="main">
+    <div class="topbar">
+      <div class="crumbs"><span id="crumb-brand">MBS Panel</span><span class="sep">/</span><b id="crumb-title">Дашборд</b></div>
+      <div class="topbar-spacer"></div>
+      <div class="search-pill" onclick="cmdkOpen()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><line x1="20" y1="20" x2="16.5" y2="16.5"/></svg><span>Поиск и команды</span><span class="kbd">Ctrl K</span></div>
+      <div class="accent-dots" id="accent-dots"></div>
+      <div class="live-pill"><span class="live-dot"></span>онлайн</div>
+    </div>
+    <div class="content">
     <div id="view-dashboard" class="view active">
       <div class="page-title">Дашборд</div>
-      <div class="page-sub">Общая статистика по сервису</div>
+      <div class="page-sub">Что происходит с сервисом прямо сейчас</div>
       <div class="stat-grid" id="stat-grid"></div>
+      <div class="grid-2">
+        <div class="panel">
+          <div class="panel-head"><h2>Сеть</h2><button class="muted-btn" onclick="showView('nodes')">Все ноды →</button></div>
+          <div id="net-list"></div>
+        </div>
+        <div class="panel">
+          <div class="panel-head"><h2>Последние действия</h2><button class="muted-btn" onclick="showView('audit')">Журнал →</button></div>
+          <div id="audit-preview"></div>
+        </div>
+      </div>
       <div class="section">
-        <div class="section-head"><h2>Последние подписки</h2></div>
+        <div class="section-head"><h2>Последние подписки</h2><button class="muted-btn" onclick="showView('subscriptions')">Все подписки →</button></div>
         <div class="table-wrap"><table><thead><tr>
           <th>Пользователь</th><th>Сервер</th><th>Тариф</th><th>Истекает</th><th>Статус</th>
         </tr></thead><tbody id="recent-subs-body"></tbody></table></div>
       </div>
     </div>
 
+    <div id="view-users" class="view">
+      <div class="page-title">Юзеры</div>
+      <div class="page-sub">Все, кто уже есть в системе, в том числе те, у кого ни разу не было подписки (в «Подписках» их не видно). Открой карточку и выдай подписку на любую ноду и срок.</div>
+      <div class="users-bar">
+        <div class="grow"><label class="f">Поиск</label><input type="text" id="users-search" placeholder="Юзернейм или Telegram ID" oninput="usersSearchInput()"></div>
+        <div style="min-width:220px"><label class="f">Выдать по Telegram ID</label><input type="text" id="users-by-id" inputmode="numeric" placeholder="123456789" onkeydown="if(event.key==='Enter')grantByTelegramId()"></div>
+        <div><button class="btn" style="padding:11px 18px" onclick="grantByTelegramId()">Выдать по ID</button></div>
+      </div>
+      <div class="check-hint" id="users-count" style="margin:-6px 0 12px"></div>
+      <div class="table-wrap"><table><thead><tr>
+        <th>Пользователь</th><th>Подписки</th><th>Активна до</th><th>Устройств</th><th>Зарегистрирован</th><th></th>
+      </tr></thead><tbody id="users-body"></tbody></table></div>
+    </div>
+
     <div id="view-subscriptions" class="view">
       <div class="page-title">Подписки</div>
       <div class="page-sub">Все выданные подписки</div>
       <div class="form-row" style="margin-bottom:16px">
         <div><input type="text" id="subs-search" placeholder="Поиск: юзернейм, tg id, сервер, тариф" oninput="renderFilteredSubs()"></div>
         <div style="flex:0;min-width:180px"><div id="subs-status-filter" class="dd"></div></div>
+        <div style="flex:0;min-width:0"><a class="btn ghost" style="white-space:nowrap;padding:11px 16px" href="/admin/api/subscriptions/export.csv">Экспорт CSV</a></div>
       </div>
       <div class="table-wrap"><table><thead><tr>
         <th>Пользователь</th><th>Сервер</th><th>Тариф</th><th>Выдана</th><th>Истекает</th><th>Статус</th><th></th>
@@ -363,7 +711,7 @@
 
       <div class="section">
         <div class="table-wrap"><table><thead><tr>
-          <th style="width:28px"></th><th>Локация</th><th>Адрес</th><th>Тип</th><th>Статус</th><th>Live</th><th></th>
+          <th style="width:28px"></th><th>Локация</th><th>Адрес</th><th>Тип</th><th>Статус</th><th>Пинг</th><th>Live</th><th></th>
         </tr></thead><tbody id="nodes-body"></tbody></table></div>
       </div>
 
@@ -421,6 +769,62 @@
       </div>
     </div>
 
+    <div id="view-chains" class="view">
+      <div class="page-title">Цепочки</div>
+      <div class="page-sub">Собери маршрут <b>клиент → сервер → сервер → интернет</b>. Зажми левую кнопку мыши на «Клиенте» и протяни провод через серверы из пула к «Интернету». Один сервер — это обычное подключение, два — цепочка. Больше двух нельзя: каждый прыжок добавляет задержку.</div>
+      <div class="cb-layout">
+        <div class="cb-scroll">
+          <div class="cb-canvas" id="cb-canvas">
+            <svg class="cb-wires" id="cb-wires" xmlns="http://www.w3.org/2000/svg"></svg>
+            <div class="cb-node cb-endpoint cb-client" id="cb-client">
+              <span class="cb-port out"></span>
+              <div class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="12" rx="2"/><path d="M8 20h8M12 16v4"/></svg></div>
+              <div class="nm">Клиент</div>
+              <div class="ad" style="max-width:none">зажми ЛКМ и тяни</div>
+            </div>
+            <div class="cb-pool-wrap">
+              <div class="cb-pool-label">Пул серверов</div>
+              <div class="cb-pool" id="cb-pool"></div>
+            </div>
+            <div class="cb-node cb-endpoint cb-internet" id="cb-internet">
+              <span class="cb-port in"></span>
+              <div class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c3 3.2 3 14.8 0 18M12 3c-3 3.2-3 14.8 0 18"/></svg></div>
+              <div class="nm">Интернет</div>
+            </div>
+          </div>
+        </div>
+        <div class="cb-hint" id="cb-hint">зажми <b>ЛКМ</b> на клиенте, веди провод через серверы, отпусти на интернете · клик по серверу тоже добавляет его · <b>Esc</b> — сбросить</div>
+        <div class="cb-inspector panel">
+          <div class="panel-head"><h2>Маршрут</h2><button class="muted-btn" onclick="cbReset()">Сбросить</button></div>
+          <div class="cb-inspector-body">
+            <div class="cb-steps" id="cb-steps"></div>
+            <div id="cb-callouts"></div>
+            <div>
+              <label class="f">Название</label>
+              <input type="text" id="cb-label" placeholder="Название (необязательно)" style="margin-bottom:12px">
+              <button class="btn block" style="margin-top:0" id="cb-create" onclick="cbCreate()" disabled>Создать цепочку</button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="section">
+        <div class="section-head"><h2>Мои цепочки</h2></div>
+        <div id="chains-list"></div>
+      </div>
+    </div>
+
+    <div id="view-audit" class="view">
+      <div class="page-title">Журнал</div>
+      <div class="page-sub">Кто и что менял в панели — последние 300 действий. Пароли и ключи сюда не попадают, только факт действия.</div>
+      <div class="form-row" style="margin-bottom:16px">
+        <div style="flex:0;min-width:220px"><div id="audit-filter" class="dd"></div></div>
+        <div style="flex:0"><button class="btn ghost" style="padding:11px 16px" onclick="loadAudit()">Обновить</button></div>
+      </div>
+      <div class="table-wrap"><table><thead><tr>
+        <th>Время</th><th>Админ</th><th>Действие</th><th>Детали</th><th>IP</th>
+      </tr></thead><tbody id="audit-body"></tbody></table></div>
+    </div>
+
     <div id="edit-node-overlay" class="modal-overlay" onclick="if(event.target===this) closeEditNode()">
       <div class="modal-card">
         <div class="modal-head">
@@ -599,6 +1003,31 @@
         <p>Порядок нод в списке (в каком порядке юзеры видят сервера в клиенте) — перетаскиванием за <code>⠿</code> слева от строки, сохраняется сразу без отдельной кнопки. Перед каждым рестартом Xray на ноде панель сама прогоняет <code>xray run -test</code> и проверяет, что TLS-сертификаты реально читаемы тем юзером, под которым крутится Xray — невалидный конфиг или неверные права на серт не применяются, а откатываются с понятной ошибкой вместо падения сервиса.</p>
       </div>
 
+      <div class="doc-block">
+        <h2>Цепочки серверов</h2>
+        <p>Страница «Цепочки» — конструктор маршрута <code>клиент → сервер A → сервер B → интернет</code>. По умолчанию клиент ходит через одну ноду; цепочка добавляет второй прыжок: трафик заходит на сервер A, оттуда уходит на сервер B и только он выпускает его в интернет. Для сайтов виден IP сервера B, а клиент подключается к A — удобно, когда вход надо держать в «чистом» регионе, а выход — в нужной стране. Больше двух серверов нельзя намеренно: каждый лишний прыжок добавляет задержку.</p>
+        <p>Как собрать: зажми левую кнопку мыши на «Клиенте» и тяни провод — когда проходишь над сервером из пула, он цепляется в маршрут (цифра 1 — вход, 2 — выход). Отпусти провод на «Интернете», чтобы замкнуть. Можно и кликами: клик по серверу добавляет его, клик по «Интернету» замыкает. Esc или «Сбросить» — начать заново, крестик на сервере убирает его и всё, что после.</p>
+        <p>Что происходит под капотом: на входной ноде панель добавляет Xray-inbound <code>chain-код</code> (тот же ключ Reality, что у ноды, но отдельный порт из диапазона 10443–10999 и свой short ID) и outbound до выходной ноды, а в routing — правило «всё из этого inbound уходит в этот outbound». На выходной ноде заводится служебный клиент <code>relay-код</code> — под ним входная нода ходит на выход. Порт открывается в ufw сам. Пользователям входной ноды в подписку добавляется ещё одна ссылка «Вход → Выход». Подписчикам выходной ноды цепочка не выдаётся.</p>
+        <p>Перед применением панель прогоняет <code>xray run -test</code>, проверяет, что порт не занят, и после рестарта убеждается, что Xray поднялся — если нет, конфиг откатывается сам. Любая ошибка цепочки не блокирует синхронизацию подписчиков: клиенты всё равно применятся, а проблема покажется в ответе.</p>
+        <p>Выходом может быть и внешняя нода с общим (shared) UUID — тогда служебный клиент не нужен. Входом — только локальная или управляемая нода, потому что панель правит её конфиг. Ноду, которая участвует в цепочке, нельзя удалить — сначала удали цепочку.</p>
+        <p>Важно для Reality: SNI-маскировка (<code>dest</code>) не должна быть сайтом с пост-квантовым обменом ключами (например, www.microsoft.com) — на таком Reality не работает ни в цепочке, ни без неё. Дефолтный <code>www.wildberries.ru</code> подходит.</p>
+      </div>
+
+      <div class="doc-block">
+        <h2>Юзеры и выдача подписок</h2>
+        <p>Страница «Юзеры» — все, кто уже есть в базе, включая тех, у кого подписок не было ни разу (в «Подписках» они не появляются, потому что там только выданное). Поиск идёт по юзернейму и Telegram ID. «Выдать подписку» открывает карточку юзера: выбираешь ноду и срок, подписка создаётся сразу, а клиент добавляется в Xray. Поле «Выдать по Telegram ID» работает и для тех, кого в базе ещё нет: запись создастся при выдаче, подписка будет ждать, пока человек зайдёт в бота. Каждая выдача попадает в журнал.</p>
+      </div>
+
+      <div class="doc-block">
+        <h2>Журнал действий</h2>
+        <p>Страница «Журнал» — кто из админов и когда менял ноды, цепочки, подписки, настройки, скачивал бэкап и входил в панель (включая неудачные входы и неверные коды 2FA, с IP). Хранится последние 5000 записей. Содержимое запросов (пароли, ключи, токены) в журнал не пишется — только факт и адрес действия.</p>
+      </div>
+
+      <div class="doc-block">
+        <h2>Поиск и команды</h2>
+        <p><code>Ctrl K</code> (или <code>⌘ K</code>) открывает палитру: быстрый переход на любую страницу, к любой ноде или цепочке, экспорт подписок в CSV, бэкап, смена акцентного цвета панели. Выбранный акцент хранится в браузере.</p>
+      </div>
+
       <div class="doc-block">
         <h2>Пароль и безопасность</h2>
         <p>Пароль админ-панели меняется командой <code>mbs pass</code> на сервере (без аргумента — сгенерит случайный). Панель физически откажется стартовать, если в <code>.env</code> стоит "change-me"/"admin"/что-то короче 8 символов — так что пропустить это не выйдет по-тихому.</p>
@@ -654,7 +1083,7 @@
 
       <div class="section" style="margin-top:20px">
         <div class="section-head"><h2>Telegram-бот</h2></div>
-        <p class="page-sub" style="margin-bottom:16px">Сейчас: <b id="settings-bot-username">—</b> (токен: <span id="settings-bot-token" style="font-family:'Fira Mono',monospace">—</span>)</p>
+        <p class="page-sub" style="margin-bottom:16px">Сейчас: <b id="settings-bot-username">—</b> (токен: <span id="settings-bot-token" style="font-family:var(--mono)">—</span>)</p>
         <div class="form-row">
           <div><label class="f">Новый токен (от @BotFather)</label><input type="text" id="settings-bot-token-input" placeholder="123456789:AAAA..."></div>
           <div style="flex:0"><label class="f">&nbsp;</label><button class="btn" onclick="saveBotSettings()">Сменить бота</button></div>
@@ -723,7 +1152,7 @@
           <div style="flex:0"><label class="f">&nbsp;</label><button class="btn" onclick="saveWebhookSettings()">Сохранить</button></div>
         </div>
         <p class="check-hint">
-          События: <code>payment.paid</code>, <code>subscription.granted_by_admin</code>, <code>subscription.revoked</code>, <code>subscription.held</code>, <code>subscription.resumed</code>, <code>node.added</code>, <code>node.deleted</code>, <code>node.enabled</code>, <code>node.disabled</code>. Тело — JSON <code>{"event": "...", "data": {...}}</code>, подписано заголовком <code>X-Signature</code> (HMAC-SHA256 от тела запроса на секрете ниже) — так получатель проверяет, что запрос реально от панели.
+          События: <code>payment.paid</code>, <code>subscription.granted_by_admin</code>, <code>subscription.revoked</code>, <code>subscription.held</code>, <code>subscription.resumed</code>, <code>node.added</code>, <code>node.deleted</code>, <code>node.enabled</code>, <code>node.disabled</code>, <code>chain.created</code>, <code>chain.deleted</code>, <code>chain.enabled</code>, <code>chain.disabled</code>. Тело — JSON <code>{"event": "...", "data": {...}}</code>, подписано заголовком <code>X-Signature</code> (HMAC-SHA256 от тела запроса на секрете ниже) — так получатель проверяет, что запрос реально от панели.
           Секрет для проверки: <code id="webhook-secret-display">—</code>
         </p>
         <div id="webhook-result"></div>
@@ -741,9 +1170,13 @@
         <div id="hwid-result"></div>
       </div>
     </div>
+    </div>
   </div>
 </div>
 
+<div id="toast-stack"></div>
+<div id="cmdk-overlay"><div class="cmdk"><div class="cmdk-input-wrap"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><line x1="20" y1="20" x2="16.5" y2="16.5"/></svg><input type="text" id="cmdk-input" placeholder="Куда перейти или что сделать…" autocomplete="off"></div><div class="cmdk-list" id="cmdk-list"></div><div class="cmdk-foot"><span>↑↓ выбрать</span><span>Enter открыть</span><span>Esc закрыть</span></div></div></div>
+
 <script>
 function esc(s) {
   if (s === null || s === undefined) return "";
@@ -826,11 +1259,16 @@ function showView(name) {
   document.querySelectorAll(".nav-item").forEach((n) => n.classList.remove("active"));
   document.getElementById("view-" + name).classList.add("active");
   document.querySelector(`.nav-item[data-view="${name}"]`).classList.add("active");
+  document.getElementById("crumb-title").textContent = VIEW_TITLES[name] || name;
+  window.scrollTo({ top: 0 });
   if (name === "dashboard") loadDashboard();
+  if (name === "users") loadUsers();
   if (name === "subscriptions") loadSubscriptions();
   if (name === "gifts") loadGifts();
   if (name === "nodes") loadNodes();
+  if (name === "chains") loadChains();
   if (name === "traffic") loadTraffic();
+  if (name === "audit") loadAudit();
   if (name === "payments") { loadPayments(); loadPaymentsSettings(); }
   if (name === "settings") { loadBrandName(); loadBotSettings(); loadAdmins(); loadTotpStatus(); loadWebhookSettings(); loadHwidSettings(); }
 }
@@ -1016,6 +1454,19 @@ function initDropdowns() {
   });
   DD.ucGrantNode = createDropdown("uc-grant-node", { options: [], placeholder: "Сервер" });
   DD.ucGrantPlan = createDropdown("uc-grant-plan", { options: [], placeholder: "Срок" });
+  DD.auditFilter = createDropdown("audit-filter", {
+    options: [
+      { value: "all", label: "Все события" },
+      { value: "login", label: "Входы" },
+      { value: "warn", label: "Подозрительное" },
+      { value: "node", label: "Ноды" },
+      { value: "chain", label: "Цепочки" },
+      { value: "sub", label: "Подписки и юзеры" },
+      { value: "settings", label: "Настройки и админы" },
+    ],
+    value: "all", placeholder: "События",
+    onChange: () => renderAuditTable(),
+  });
   DD.legalType = createDropdown("legal-type", {
     options: [
       { value: "self", label: "Самозанятый" },
@@ -1040,12 +1491,15 @@ const ICONS = {
   up: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="6,11 12,5 18,11"/></svg>',
   down: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="6,13 12,19 18,13"/></svg>',
   pulse: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3,13 8,13 10,7 14,19 16,13 21,13"/></svg>',
+  link: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1"/><path d="M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1"/></svg>',
 };
 
-function statCard(label, value, color, icon, delay) {
+function statCard(label, value, color, icon, delay, sub) {
+  const num = typeof value === "number";
   return `<div class="stat-card reveal" style="animation-delay:${delay}s">
     <div class="l">${label}</div>
-    <div class="row" style="color:${color}">${icon}<span class="v" style="color:var(--text)">${value}</span></div>
+    <div class="row"><div class="ico" style="color:${color}">${icon}</div><span class="v"${num ? ` data-count="${value}"` : ""}>${num ? 0 : value}</span></div>
+    ${sub ? `<div class="sub">${sub}</div>` : ""}
   </div>`;
 }
 
@@ -1070,7 +1524,7 @@ async function loadTraffic() {
 }
 
 async function resetTraffic(uuid, btn) {
-  if (!confirm("Сбросить счётчик трафика для этой подписки?")) return;
+  if (!(await askConfirm("Сбросить счётчик трафика для этой подписки?", { ok: "Сбросить" }))) return;
   btn.disabled = true;
   btn.textContent = "…";
   try {
@@ -1309,7 +1763,7 @@ async function createAdmin() {
 }
 
 async function deleteAdmin(id) {
-  if (!confirm("Удалить этого админа?")) return;
+  if (!(await askConfirm("Удалить этого админа?", { ok: "Удалить" }))) return;
   try {
     await api(`/admin/api/admins/${id}`, { method: "DELETE" });
     loadAdmins();
@@ -1339,7 +1793,7 @@ async function startEnableTotp() {
   try {
     res = await api("/admin/api/2fa/setup", { method: "POST" });
   } catch (e) {
-    alert("Не получилось: " + e.message);
+    toast("Не получилось: " + e.message, "error");
     return;
   }
   document.getElementById("totp-secret-display").textContent = res.secret;
@@ -1400,7 +1854,7 @@ async function restoreBackup() {
   const result = document.getElementById("backup-result");
   const file = input.files[0];
   if (!file) return;
-  if (!confirm("Заменить текущую базу файлом " + file.name + "? Текущая база сохранится в файл .before-restore-... на сервере, но действие лучше не отменять просто так.")) return;
+  if (!(await askConfirm("Заменить текущую базу файлом " + file.name + "? Текущая база сохранится в файл .before-restore-... на сервере, но действие лучше не отменять просто так.", { title: "Восстановление бэкапа", ok: "Восстановить" }))) return;
   result.innerHTML = '<p class="page-sub" style="margin-top:10px">Восстанавливаю…</p>';
   try {
     const form = new FormData();
@@ -1427,11 +1881,17 @@ async function loadDashboard() {
   const stats = await api("/admin/api/stats");
   const grid = document.getElementById("stat-grid");
   grid.innerHTML = [
-    ["Пользователей", stats.users, "var(--blue)", ICONS.users],
-    ["Активных подписок", stats.active_subscriptions, "var(--green)", ICONS.check],
-    ["Всего подписок", stats.total_subscriptions, "var(--accent)", ICONS.box],
-    ["Гифт-коды (созд./исп.)", stats.gifts_created + " / " + stats.gifts_used, "var(--pink)", ICONS.gift],
-  ].map(([l, v, c, ic], i) => statCard(l, v, c, ic, i * 0.05)).join("");
+    ["Пользователей", stats.users, "var(--blue)", ICONS.users, "всего в базе"],
+    ["Активных подписок", stats.active_subscriptions, "var(--green)", ICONS.check, "из " + stats.total_subscriptions + " выданных"],
+    ["Нод включено", stats.nodes, "var(--accent)", ICONS.box, "локаций в подписках"],
+    ["Цепочек", stats.chains, "var(--yellow)", ICONS.link, "клиент → A → B → интернет"],
+  ].map(([l, v, c, ic, sub], i) => statCard(l, v, c, ic, i * 0.05, sub)).join("");
+  runCountUps(grid);
+  const navCount = document.getElementById("nav-chains-count");
+  if (navCount) navCount.textContent = stats.chains ? String(stats.chains) : "";
+
+  loadNetworkPanel();
+  loadAuditPreview();
 
   const recent = await api("/admin/api/subscriptions?limit=8");
   const body = document.getElementById("recent-subs-body");
@@ -1499,6 +1959,7 @@ async function openUserCard(tgId, label) {
   document.getElementById("devices-limit").value = data.hwid_limit || "";
   document.getElementById("devices-limit-hint").textContent = `По умолчанию (если пусто): ${data.hwid_fallback_limit}`;
   renderUcSubs(data.subscriptions);
+  if (data.exists === false) document.getElementById("uc-subs-list").innerHTML = '<div class="empty">Этого юзера ещё нет в базе — выдача создаст его, и подписка будет ждать, пока он зайдёт в бота.</div>';
   renderDevices(data.devices);
 }
 function closeDevices() {
@@ -1533,8 +1994,9 @@ async function grantSubscription() {
   if (!node || !plan) return;
   try {
     await api(`/admin/api/users/${devicesTgId}/grant`, { method: "POST", body: JSON.stringify({ node, plan }) });
+    toast("Подписка выдана", "success");
   } catch (e) {
-    alert("Не получилось: " + e.message);
+    toast("Не получилось: " + e.message, "error");
   }
   openUserCard(devicesTgId, document.getElementById("devices-title").textContent.replace("Карточка: ", ""));
 }
@@ -1554,7 +2016,7 @@ async function deleteDevice(deviceId) {
   try {
     await api(`/admin/api/users/${devicesTgId}/devices/${deviceId}`, { method: "DELETE" });
   } catch (e) {
-    alert("Не получилось: " + e.message);
+    toast("Не получилось: " + e.message, "error");
   }
   const data = await api(`/admin/api/users/${devicesTgId}`);
   renderDevices(data.devices);
@@ -1564,16 +2026,16 @@ async function saveHwidLimit() {
   try {
     await api(`/admin/api/users/${devicesTgId}/hwid-limit`, { method: "POST", body: JSON.stringify({ limit: val || null }) });
   } catch (e) {
-    alert("Не получилось: " + e.message);
+    toast("Не получилось: " + e.message, "error");
   }
 }
 
 async function revokeSub(uuid) {
-  if (!confirm("Отозвать подписку?")) return;
+  if (!(await askConfirm("Отозвать подписку? Доступ пропадёт сразу, вернуть можно только новой выдачей.", { ok: "Отозвать" }))) return;
   try {
     await api(`/admin/api/subscriptions/${uuid}/revoke`, { method: "POST" });
   } catch (e) {
-    alert("Не получилось: " + e.message);
+    toast("Не получилось: " + e.message, "error");
   }
   loadSubscriptions();
 }
@@ -1582,7 +2044,7 @@ async function holdSub(uuid) {
   try {
     await api(`/admin/api/subscriptions/${uuid}/hold`, { method: "POST" });
   } catch (e) {
-    alert("Не получилось: " + e.message);
+    toast("Не получилось: " + e.message, "error");
   }
   loadSubscriptions();
 }
@@ -1591,7 +2053,7 @@ async function resumeSub(uuid) {
   try {
     await api(`/admin/api/subscriptions/${uuid}/resume`, { method: "POST" });
   } catch (e) {
-    alert("Не получилось: " + e.message);
+    toast("Не получилось: " + e.message, "error");
   }
   loadSubscriptions();
 }
@@ -1630,7 +2092,9 @@ async function createGift() {
   }
 }
 
-function copyText(t) { navigator.clipboard.writeText(t); }
+function copyText(t) {
+  navigator.clipboard.writeText(t).then(() => toast("Скопировано", "success", 1800)).catch(() => toast("Не удалось скопировать", "error"));
+}
 
 async function loadNodes() {
   nodesCache = await api("/admin/api/nodes");
@@ -1681,18 +2145,30 @@ function renderNodesTable() {
   body.innerHTML = nodesCache.map((n, i) => `
     <tr class="reveal draggable-row" style="animation-delay:${Math.min(i, 10) * 0.025}s" draggable="true" data-code="${esc(n.code)}">
       <td class="drag-handle" title="Перетащи, чтобы поменять порядок">⠿</td>
-      <td>${esc(n.label)}</td><td>${esc(n.address) || "—"}${n.port && n.address ? ":" + n.port : ""}</td>
+      <td>${esc(n.label)}</td><td><span class="mono" style="font-size:12px">${esc(n.address) || "—"}${n.port && n.address ? ":" + n.port : ""}</span></td>
       <td>${n.kind === "local" ? "локальная" : n.kind === "managed" ? "управляемая" : "внешняя"}</td>
       <td>${n.status === "pending" ? '<span class="badge warn">ожидает установки</span>' : (n.enabled ? '<span class="badge ok">включена</span>' : '<span class="badge bad">выключена</span>')}</td>
+      <td id="ping-${esc(n.code)}">${n.status === "pending" ? "—" : '<span class="skeleton" style="display:inline-block;width:56px;height:20px"></span>'}</td>
       <td id="metrics-${esc(n.code)}">${n.status === "pending" ? "—" : `<button class="muted-btn" onclick="loadNodeMetrics('${esc(n.code)}')">Проверить</button>`}</td>
-      <td>
+      <td class="act">
         <button class="muted-btn" onclick="openEditNode('${n.code}')">Редактировать</button>
         ${n.code !== "de1" ? `<button class="muted-btn" onclick="toggleNode('${n.code}', ${n.enabled ? 0 : 1})">${n.enabled ? "Выключить" : "Включить"}</button>` : ""}
-        ${n.code !== "de1" ? `<button class="muted-btn" onclick="deleteNode('${n.code}')">Удалить</button>` : ""}
+        ${n.code !== "de1" ? `<button class="muted-btn red" onclick="deleteNode('${n.code}')">Удалить</button>` : ""}
       </td>
     </tr>
   `).join("");
   wireNodeDragAndDrop();
+  fillNodePing();
+}
+
+function fillNodePing() {
+  fetchLatency().then((lat) => {
+    nodesCache.forEach((n) => {
+      const cell = document.getElementById("ping-" + n.code);
+      if (!cell || n.status === "pending") return;
+      cell.innerHTML = n.enabled ? msPill(lat[n.code]) : '<span class="check-hint">—</span>';
+    });
+  }).catch(() => {});
 }
 
 async function loadNodeMetrics(code) {
@@ -1702,7 +2178,7 @@ async function loadNodeMetrics(code) {
     const m = await api(`/admin/api/nodes/${code}/metrics`);
     if (!m.ok) { cell.innerHTML = '<span class="badge bad">офлайн</span>'; return; }
     const load = m.load1 !== null && m.load1 !== undefined ? m.load1.toFixed(2) : "—";
-    cell.innerHTML = `<span style="font-family:'Fira Mono',monospace;font-size:12px">CPU ${load} · ${esc(m.mem_fmt)} · ${esc(m.uptime_fmt)}</span>`;
+    cell.innerHTML = `<span style="font-family:var(--mono);font-size:12px">CPU ${load} · ${esc(m.mem_fmt)} · ${esc(m.uptime_fmt)}</span>`;
   } catch (e) {
     cell.innerHTML = '<span class="badge bad">ошибка</span>';
   }
@@ -1758,16 +2234,16 @@ async function toggleNode(code, enabled) {
   try {
     await api(`/admin/api/nodes/${code}`, { method: "PATCH", body: JSON.stringify({ enabled }) });
   } catch (e) {
-    alert("Не получилось: " + e.message);
+    toast("Не получилось: " + e.message, "error");
   }
   loadNodes();
 }
 async function deleteNode(code) {
-  if (!confirm("Удалить ноду?")) return;
+  if (!(await askConfirm("Удалить ноду? Это нельзя отменить.", { ok: "Удалить" }))) return;
   try {
     await api(`/admin/api/nodes/${code}`, { method: "DELETE" });
   } catch (e) {
-    alert("Не получилось: " + e.message);
+    toast("Не получилось: " + e.message, "error");
   }
   loadNodes();
 }
@@ -1857,10 +2333,1016 @@ function applyBrandName(name) {
   if (splash) splash.textContent = name;
   const sidebar = document.getElementById("sidebar-brand-name");
   if (sidebar) sidebar.textContent = name;
+  const crumb = document.getElementById("crumb-brand");
+  if (crumb) crumb.textContent = name;
+}
+
+const VIEW_TITLES = {
+  dashboard: "Дашборд", users: "Юзеры", subscriptions: "Подписки", gifts: "Гифт-коды", nodes: "Ноды", chains: "Цепочки",
+  traffic: "Трафик", payments: "Платежи", audit: "Журнал", docs: "Документация", settings: "Настройки",
+};
+
+const TOAST_ICONS = {
+  success: '<svg class="t-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M8 12.5l2.5 2.5L16 9.5"/></svg>',
+  error: '<svg class="t-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M9 9l6 6M15 9l-6 6"/></svg>',
+  info: '<svg class="t-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01"/></svg>',
+  warn: '<svg class="t-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l10 18H2L12 3z"/><path d="M12 10v5M12 18h.01"/></svg>',
+};
+
+function toast(message, type, ms) {
+  type = type || "info";
+  ms = ms || (type === "error" ? 6500 : 3800);
+  const stack = document.getElementById("toast-stack");
+  const dupe = Array.from(stack.querySelectorAll(".toast:not(.out)")).some((t) => t.dataset.msg === message);
+  if (dupe) return;
+  const el = document.createElement("div");
+  el.dataset.msg = message;
+  el.className = "toast " + type;
+  el.innerHTML = TOAST_ICONS[type] + "<div>" + esc(message) + '</div><div class="t-bar" style="animation-duration:' + ms + 'ms"></div>';
+  stack.appendChild(el);
+  const close = () => {
+    el.classList.add("out");
+    setTimeout(() => el.remove(), 320);
+  };
+  const timer = setTimeout(close, ms);
+  el.addEventListener("click", () => { clearTimeout(timer); close(); });
+}
+
+function askConfirm(message, opts) {
+  opts = opts || {};
+  return new Promise((resolve) => {
+    const overlay = document.createElement("div");
+    overlay.className = "modal-overlay";
+    overlay.innerHTML = `<div class="modal-card" style="max-width:420px">
+      <div class="modal-head"><h2>${esc(opts.title || "Подтверди действие")}</h2></div>
+      <p class="page-sub" style="margin:0 0 8px">${esc(message)}</p>
+      <div class="modal-actions">
+        <button class="btn ghost" data-r="0">Отмена</button>
+        <button class="btn ${opts.danger === false ? "" : "danger"}" data-r="1">${esc(opts.ok || "Подтвердить")}</button>
+      </div></div>`;
+    document.body.appendChild(overlay);
+    requestAnimationFrame(() => overlay.classList.add("show"));
+    const done = (value) => {
+      overlay.classList.remove("show");
+      setTimeout(() => overlay.remove(), 280);
+      document.removeEventListener("keydown", onKey);
+      resolve(value);
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") done(false);
+      if (e.key === "Enter") done(true);
+    };
+    document.addEventListener("keydown", onKey);
+    overlay.addEventListener("click", (e) => {
+      if (e.target === overlay) { done(false); return; }
+      const btn = e.target.closest("[data-r]");
+      if (btn) done(btn.dataset.r === "1");
+    });
+  });
+}
+
+function animateNumber(el, to, duration) {
+  const start = performance.now();
+  duration = duration || 900;
+  function tick(now) {
+    const t = Math.min(1, (now - start) / duration);
+    const eased = 1 - Math.pow(1 - t, 4);
+    el.textContent = Math.round(to * eased);
+    if (t < 1) requestAnimationFrame(tick);
+  }
+  requestAnimationFrame(tick);
+}
+
+function runCountUps(root) {
+  (root || document).querySelectorAll("[data-count]").forEach((el) => {
+    animateNumber(el, parseInt(el.dataset.count, 10) || 0);
+  });
+}
+
+const ACCENTS = [
+  { id: "cyan", name: "Бирюзовый", rgb: "34,211,238", deep: "8,145,178" },
+  { id: "violet", name: "Фиолетовый", rgb: "167,139,250", deep: "109,40,217" },
+  { id: "emerald", name: "Изумрудный", rgb: "52,211,153", deep: "5,150,105" },
+  { id: "amber", name: "Янтарный", rgb: "251,191,36", deep: "217,119,6" },
+  { id: "rose", name: "Розовый", rgb: "251,113,133", deep: "190,18,60" },
+];
+
+function applyAccent(id) {
+  const a = ACCENTS.find((x) => x.id === id) || ACCENTS[0];
+  const root = document.documentElement.style;
+  root.setProperty("--accent-rgb", a.rgb);
+  root.setProperty("--accent-deep-rgb", a.deep);
+  try { localStorage.setItem("mbs-accent", a.id); } catch (e) {}
+  document.querySelectorAll(".accent-dot").forEach((d) => d.classList.toggle("active", d.dataset.id === a.id));
+}
+
+function initAccent() {
+  const box = document.getElementById("accent-dots");
+  box.innerHTML = ACCENTS.map((a) => `<span class="accent-dot" data-id="${a.id}" title="${a.name}" style="background:rgb(${a.rgb})"></span>`).join("");
+  box.addEventListener("click", (e) => {
+    const dot = e.target.closest(".accent-dot");
+    if (dot) applyAccent(dot.dataset.id);
+  });
+  let saved = "cyan";
+  try { saved = localStorage.getItem("mbs-accent") || "cyan"; } catch (e) {}
+  applyAccent(saved);
+}
+
+function msClass(ms) {
+  if (ms === null || ms === undefined) return "bad";
+  if (ms < 80) return "good";
+  if (ms < 200) return "mid";
+  return "bad";
+}
+
+function msPill(ms) {
+  if (ms === null || ms === undefined) return '<span class="pill-ms bad">нет ответа</span>';
+  return `<span class="pill-ms ${msClass(ms)}">${ms} мс</span>`;
+}
+
+let latencyCache = {};
+async function fetchLatency() {
+  const rows = await api("/admin/api/nodes/latency");
+  latencyCache = {};
+  rows.forEach((r) => { latencyCache[r.code] = r.ms; });
+  return latencyCache;
+}
+
+function fmtDateTime(iso) {
+  if (!iso) return "—";
+  const d = new Date(iso + "Z");
+  if (isNaN(d.getTime())) return iso;
+  const pad = (n) => String(n).padStart(2, "0");
+  return `${pad(d.getDate())}.${pad(d.getMonth() + 1)} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+
+function timeAgo(iso) {
+  const d = new Date(iso + "Z");
+  const sec = Math.max(0, Math.floor((Date.now() - d.getTime()) / 1000));
+  if (sec < 60) return "только что";
+  if (sec < 3600) return Math.floor(sec / 60) + " мин назад";
+  if (sec < 86400) return Math.floor(sec / 3600) + " ч назад";
+  return Math.floor(sec / 86400) + " дн назад";
+}
+
+const AUDIT_META = {
+  "login.ok": ["Вход в панель", "login"],
+  "login.failed": ["Неудачный вход", "warn"],
+  "login.totp_failed": ["Неверный код 2FA", "warn"],
+  "node.add": ["Нода добавлена", "node"],
+  "node.provision": ["Нода: команда установки", "node"],
+  "node.reorder": ["Порядок нод изменён", "node"],
+  "node.edit": ["Нода изменена", "node"],
+  "node.delete": ["Нода удалена", "node"],
+  "chain.create": ["Цепочка создана", "chain"],
+  "chain.edit": ["Цепочка изменена", "chain"],
+  "chain.delete": ["Цепочка удалена", "chain"],
+  "sub.revoke": ["Подписка отозвана", "sub"],
+  "sub.hold": ["Подписка на паузе", "sub"],
+  "sub.resume": ["Подписка возобновлена", "sub"],
+  "sub.reset_traffic": ["Сброс трафика", "sub"],
+  "user.grant": ["Подписка выдана", "sub"],
+  "user.hwid_limit": ["Лимит устройств юзера", "sub"],
+  "user.device_delete": ["Устройство удалено", "sub"],
+  "gift.create": ["Гифт-код создан", "sub"],
+  "admin.add": ["Админ добавлен", "settings"],
+  "admin.delete": ["Админ удалён", "settings"],
+  "2fa.enable": ["2FA включена", "settings"],
+  "2fa.disable": ["2FA выключена", "settings"],
+  "backup.download": ["Бэкап скачан", "settings"],
+  "backup.restore": ["Бэкап восстановлен", "warn"],
+  "settings.bot": ["Смена бота", "settings"],
+  "settings.brand": ["Название бренда", "settings"],
+  "settings.webhook": ["Webhook", "settings"],
+  "settings.hwid": ["Лимит устройств", "settings"],
+  "settings.payments": ["Настройки платежей", "settings"],
+};
+
+function auditMeta(action) {
+  return AUDIT_META[action] || [action, ""];
+}
+
+let auditRows = [];
+
+function renderAuditTable() {
+  const filter = DD.auditFilter ? DD.auditFilter.getValue() : "all";
+  const rows = auditRows.filter((r) => filter === "all" || auditMeta(r.action)[1] === filter);
+  const body = document.getElementById("audit-body");
+  body.innerHTML = rows.length ? rows.map((r, i) => {
+    const [label, cls] = auditMeta(r.action);
+    return `<tr ${rowAttr(i)}>
+      <td title="${esc(r.ts)}"><span class="mono" style="font-size:12px">${fmtDateTime(r.ts)}</span> <span class="check-hint">· ${timeAgo(r.ts)}</span></td>
+      <td>${r.admin ? esc(r.admin) : '<span class="check-hint">—</span>'}</td>
+      <td><span class="audit-pill ${cls}">${esc(label)}</span></td>
+      <td><span class="mono" style="font-size:12px;color:var(--muted)">${esc(r.detail || "")}</span></td>
+      <td><span class="mono" style="font-size:12px;color:var(--muted2)">${esc(r.ip || "")}</span></td>
+    </tr>`;
+  }).join("") : '<tr><td colspan="5"><div class="empty">Пока ничего не происходило</div></td></tr>';
+}
+
+async function loadAudit() {
+  auditRows = await api("/admin/api/audit?limit=300");
+  renderAuditTable();
+}
+
+async function loadAuditPreview() {
+  const box = document.getElementById("audit-preview");
+  try {
+    const rows = await api("/admin/api/audit?limit=6");
+    box.innerHTML = rows.length ? rows.map((r) => {
+      const [label, cls] = auditMeta(r.action);
+      return `<div class="net-row"><span class="audit-pill ${cls}">${esc(label)}</span>
+        <div class="name" style="font-weight:500;color:var(--text-dim)">${r.admin ? esc(r.admin) : "—"}</div>
+        <span class="check-hint">${timeAgo(r.ts)}</span></div>`;
+    }).join("") : '<div class="empty" style="padding:24px 0">Журнал пока пуст</div>';
+  } catch (e) {
+    box.innerHTML = "";
+  }
+}
+
+async function loadNetworkPanel() {
+  const box = document.getElementById("net-list");
+  box.innerHTML = '<div class="skeleton" style="height:38px;margin-bottom:10px"></div>'.repeat(3);
+  let nodes;
+  try {
+    nodes = await api("/admin/api/nodes");
+  } catch (e) {
+    box.innerHTML = "";
+    return;
+  }
+  nodesCache = nodes;
+  box.innerHTML = nodes.map((n) => `
+    <div class="net-row">
+      <span class="dot ${n.enabled && n.status === "active" ? "wait" : "off"}" id="net-dot-${esc(n.code)}"></span>
+      <div class="name">${esc(n.label)}<div class="addr">${esc(n.address || "—")}</div></div>
+      <span id="net-ms-${esc(n.code)}">${n.status === "pending" ? '<span class="badge warn plain">ждёт установки</span>' : (n.enabled ? '<span class="skeleton" style="display:inline-block;width:54px;height:20px"></span>' : '<span class="badge bad plain">выключена</span>')}</span>
+    </div>`).join("") || '<div class="empty">Нод пока нет</div>';
+  try {
+    const lat = await fetchLatency();
+    nodes.forEach((n) => {
+      if (!n.enabled || n.status !== "active") return;
+      const dot = document.getElementById("net-dot-" + n.code);
+      const cell = document.getElementById("net-ms-" + n.code);
+      if (!dot || !cell) return;
+      const ms = lat[n.code];
+      dot.className = "dot " + (ms === null || ms === undefined ? "off" : "on");
+      cell.innerHTML = msPill(ms);
+    });
+  } catch (e) {}
+}
+
+let usersTimer = 0;
+
+function userLabel(u) {
+  return u.username ? "@" + u.username : "tg" + u.tg_id;
+}
+
+function renderUsers(rows) {
+  const body = document.getElementById("users-body");
+  body.innerHTML = rows.length ? rows.map((u, i) => `
+    <tr ${rowAttr(i)}>
+      <td><b>${esc(userLabel(u))}</b>${u.username ? ` <span class="check-hint mono">tg${u.tg_id}</span>` : ""}</td>
+      <td>${u.subs_active ? `<span class="badge ok">${u.subs_active} активн.</span>` : '<span class="badge plain warn">нет активных</span>'} <span class="check-hint">из ${u.subs_total}</span></td>
+      <td>${u.active_until ? fmtDate(u.active_until) : '<span class="check-hint">—</span>'}</td>
+      <td><span class="mono">${u.devices}</span></td>
+      <td>${fmtDate(u.created_at)}</td>
+      <td class="act">
+        <button class="muted-btn" onclick="openUserCard(${u.tg_id}, '${esc(userLabel(u))}')">Карточка</button>
+        <button class="muted-btn" style="color:var(--accent)" onclick="openUserCard(${u.tg_id}, '${esc(userLabel(u))}')">Выдать подписку</button>
+      </td>
+    </tr>`).join("") : '<tr><td colspan="6"><div class="empty">Никого не нашлось. Если знаешь Telegram ID — введи его выше и нажми «Выдать по ID».</div></td></tr>';
+}
+
+async function loadUsers() {
+  const q = document.getElementById("users-search").value.trim();
+  try {
+    const rows = await api("/admin/api/users?limit=300" + (q ? "&q=" + encodeURIComponent(q) : ""));
+    renderUsers(rows);
+    document.getElementById("users-count").textContent = rows.length ? "показано: " + rows.length : "";
+  } catch (e) {
+    toast(e.message, "error");
+  }
+}
+
+function usersSearchInput() {
+  clearTimeout(usersTimer);
+  usersTimer = setTimeout(loadUsers, 250);
+}
+
+function grantByTelegramId() {
+  const raw = document.getElementById("users-by-id").value.trim();
+  if (!/^[0-9]{1,15}$/.test(raw)) {
+    toast("Telegram ID — это только цифры", "warn");
+    return;
+  }
+  openUserCard(parseInt(raw, 10), "tg" + raw);
+}
+
+function cmdkItems() {
+  const items = [];
+  const nav = [
+    ["dashboard", "Дашборд"], ["users", "Юзеры"], ["subscriptions", "Подписки"], ["gifts", "Гифт-коды"], ["nodes", "Ноды"],
+    ["chains", "Цепочки серверов"], ["traffic", "Трафик"], ["payments", "Платежи"], ["audit", "Журнал действий"],
+    ["docs", "Документация"], ["settings", "Настройки"],
+  ];
+  nav.forEach(([id, title]) => items.push({ group: "Страницы", label: title, hint: "перейти", icon: "arrow", run: () => showView(id) }));
+  items.push({ group: "Действия", label: "Построить цепочку серверов", hint: "конструктор", icon: "link", run: () => showView("chains") });
+  items.push({ group: "Действия", label: "Выдать подписку юзеру", hint: "юзеры", icon: "plus", run: () => showView("users") });
+  items.push({ group: "Действия", label: "Добавить ноду", hint: "ноды", icon: "plus", run: () => showView("nodes") });
+  items.push({ group: "Действия", label: "Экспорт подписок в CSV", hint: "скачать", icon: "down", run: () => { window.location.href = "/admin/api/subscriptions/export.csv"; } });
+  items.push({ group: "Действия", label: "Скачать бэкап", hint: "скачать", icon: "down", run: () => downloadBackup() });
+  items.push({ group: "Действия", label: "Выйти", hint: "", icon: "out", run: () => logout() });
+  ACCENTS.forEach((a) => items.push({ group: "Оформление", label: "Акцент: " + a.name, hint: "тема", icon: "dot", run: () => applyAccent(a.id) }));
+  (nodesCache || []).forEach((n) => items.push({ group: "Ноды", label: n.label, hint: n.address || "", icon: "server", run: () => showView("nodes") }));
+  (CB.existing || []).forEach((c) => items.push({ group: "Цепочки", label: c.label, hint: c.port, icon: "link", run: () => showView("chains") }));
+  return items;
+}
+
+const CMDK = { open: false, items: [], filtered: [], sel: 0 };
+
+function cmdkIcon(name) {
+  const paths = {
+    arrow: '<path d="M5 12h14M13 6l6 6-6 6"/>',
+    link: '<path d="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1"/><path d="M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1"/>',
+    plus: '<path d="M12 5v14M5 12h14"/>',
+    down: '<path d="M12 4v12M6 12l6 6 6-6M5 20h14"/>',
+    out: '<path d="M9 4H5v16h4M16 8l4 4-4 4M20 12H9"/>',
+    dot: '<circle cx="12" cy="12" r="5"/>',
+    server: '<rect x="3" y="4" width="18" height="6" rx="1.5"/><rect x="3" y="14" width="18" height="6" rx="1.5"/>',
+  };
+  return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${paths[name] || paths.arrow}</svg>`;
+}
+
+function cmdkRender() {
+  const list = document.getElementById("cmdk-list");
+  let html = "";
+  let lastGroup = null;
+  CMDK.filtered.forEach((it, i) => {
+    if (it.group !== lastGroup) { html += `<div class="cmdk-group">${esc(it.group)}</div>`; lastGroup = it.group; }
+    html += `<div class="cmdk-item${i === CMDK.sel ? " sel" : ""}" data-i="${i}">${cmdkIcon(it.icon)}<span>${esc(it.label)}</span><span class="hint">${esc(it.hint || "")}</span></div>`;
+  });
+  list.innerHTML = html || '<div class="empty" style="padding:30px 0">Ничего не нашлось</div>';
+  const sel = list.querySelector(".cmdk-item.sel");
+  if (sel) sel.scrollIntoView({ block: "nearest" });
+}
+
+function cmdkFilter() {
+  const q = document.getElementById("cmdk-input").value.trim().toLowerCase();
+  const words = q.split(/\s+/).filter(Boolean);
+  CMDK.filtered = CMDK.items.filter((it) => {
+    const hay = (it.label + " " + (it.hint || "") + " " + it.group).toLowerCase();
+    return words.every((w) => hay.includes(w));
+  });
+  CMDK.sel = 0;
+  cmdkRender();
+}
+
+function cmdkOpen() {
+  if (!document.getElementById("app").classList.contains("show")) return;
+  CMDK.open = true;
+  CMDK.items = cmdkItems();
+  const overlay = document.getElementById("cmdk-overlay");
+  overlay.classList.add("show");
+  const input = document.getElementById("cmdk-input");
+  input.value = "";
+  cmdkFilter();
+  input.focus();
+}
+
+function cmdkClose() {
+  CMDK.open = false;
+  document.getElementById("cmdk-overlay").classList.remove("show");
+}
+
+function cmdkRun(i) {
+  const it = CMDK.filtered[i];
+  if (!it) return;
+  cmdkClose();
+  it.run();
+}
+
+function initCmdk() {
+  const input = document.getElementById("cmdk-input");
+  input.addEventListener("input", cmdkFilter);
+  document.getElementById("cmdk-list").addEventListener("click", (e) => {
+    const item = e.target.closest(".cmdk-item");
+    if (item) cmdkRun(parseInt(item.dataset.i, 10));
+  });
+  document.getElementById("cmdk-overlay").addEventListener("mousedown", (e) => {
+    if (e.target.id === "cmdk-overlay") cmdkClose();
+  });
+  document.addEventListener("keydown", (e) => {
+    if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "k") {
+      e.preventDefault();
+      if (CMDK.open) cmdkClose(); else cmdkOpen();
+      return;
+    }
+    if (!CMDK.open) return;
+    if (e.key === "Escape") { cmdkClose(); return; }
+    if (e.key === "ArrowDown") { e.preventDefault(); CMDK.sel = Math.min(CMDK.filtered.length - 1, CMDK.sel + 1); cmdkRender(); }
+    if (e.key === "ArrowUp") { e.preventDefault(); CMDK.sel = Math.max(0, CMDK.sel - 1); cmdkRender(); }
+    if (e.key === "Enter") { e.preventDefault(); cmdkRun(CMDK.sel); }
+  });
+}
+
+const CB = {
+  ready: false,
+  nodes: [],
+  draft: [],
+  linked: false,
+  dragging: false,
+  pointer: { x: 0, y: 0 },
+  probe: null,
+  probeToken: 0,
+  existing: [],
+  lastReject: null,
+  suppressClick: false,
+  raf: 0,
+  hover: { key: null, target: null, timer: 0 },
+};
+
+const CB_MAX = 2;
+
+function cbNode(code) {
+  return CB.nodes.find((n) => n.code === code);
+}
+
+function cbFlagOf(label) {
+  const code = flagToCode(label);
+  return code ? flagEmoji(code) : "";
+}
+
+function cbPlainName(label) {
+  const code = flagToCode(label);
+  if (!code) return label || "";
+  return Array.from(label).slice(2).join("").trim() || label;
+}
+
+function cbEligible(node, position) {
+  if (!node) return "нода не найдена";
+  if (!node.enabled) return "нода выключена";
+  if (node.status !== "active") return "нода ещё не установлена";
+  if (position === 0 && node.kind === "external") return "внешняя нода не может быть входом — панель ею не управляет";
+  if (position === 1 && node.kind === "external" && !node.shared_uuid) return "у внешней ноды нет shared UUID";
+  return null;
+}
+
+function cbDuplicate() {
+  if (CB.draft.length !== 2) return false;
+  return CB.existing.some((c) => c.entry_node === CB.draft[0] && c.exit_node === CB.draft[1]);
+}
+
+function cbEl(code) {
+  return document.querySelector(`#cb-pool .cb-server[data-code="${code}"]`);
+}
+
+function cbRenderPool() {
+  const pool = document.getElementById("cb-pool");
+  pool.innerHTML = CB.nodes.map((n) => {
+    const flag = cbFlagOf(n.label);
+    const ico = flag || '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="6" rx="1.5"/><rect x="3" y="14" width="18" height="6" rx="1.5"/><line x1="7" y1="7" x2="7.01" y2="7"/><line x1="7" y1="17" x2="7.01" y2="17"/></svg>';
+    return `<div class="cb-node cb-server" data-code="${esc(n.code)}" title="${esc(n.label)}">
+      <span class="cb-badge"></span><span class="cb-x" title="Убрать из цепочки">×</span>
+      <span class="cb-port in"></span><span class="cb-port out"></span>
+      <div class="ico">${ico}</div>
+      <div><div class="nm">${esc(cbPlainName(n.label))}</div><div class="ad">${esc(n.address || n.code)}</div><div class="cb-lat" id="cb-lat-${esc(n.code)}"></div></div>
+    </div>`;
+  }).join("") || '<div class="empty" style="grid-column:1/-1">Нод пока нет — добавь их на странице «Ноды»</div>';
+  cbSyncNodes();
+}
+
+function cbSyncNodes() {
+  const tail = CB.draft[CB.draft.length - 1];
+  const nextPos = CB.draft.length;
+  CB.nodes.forEach((n) => {
+    const el = cbEl(n.code);
+    if (!el) return;
+    const idx = CB.draft.indexOf(n.code);
+    el.classList.toggle("in-chain", idx >= 0);
+    el.classList.toggle("tail", n.code === tail && !CB.dragging);
+    const badge = el.querySelector(".cb-badge");
+    if (badge) badge.textContent = idx >= 0 ? String(idx + 1) : "";
+    const reason = idx < 0 && nextPos < CB_MAX ? cbEligible(n, nextPos) : null;
+    el.classList.toggle("locked", !!reason);
+    el.title = reason ? n.label + " — " + reason : n.label;
+  });
+  const client = document.getElementById("cb-client");
+  client.classList.toggle("active", CB.draft.length > 0);
+  client.classList.toggle("tail", CB.draft.length === 0);
+  const net = document.getElementById("cb-internet");
+  net.classList.toggle("linked", CB.linked);
+}
+
+function cbEdge(el, side) {
+  const c = document.getElementById("cb-canvas").getBoundingClientRect();
+  const r = el.getBoundingClientRect();
+  if (side === "right") return { x: r.right - c.left, y: r.top + r.height / 2 - c.top, dir: [1, 0], side };
+  if (side === "left") return { x: r.left - c.left, y: r.top + r.height / 2 - c.top, dir: [-1, 0], side };
+  if (side === "bottom") return { x: r.left + r.width / 2 - c.left, y: r.bottom - c.top, dir: [0, 1], side };
+  return { x: r.left + r.width / 2 - c.left, y: r.top - c.top, dir: [0, -1], side };
+}
+
+function cbSides(aEl, bEl) {
+  const ra = aEl.getBoundingClientRect();
+  const rb = bEl.getBoundingClientRect();
+  const dx = rb.left + rb.width / 2 - (ra.left + ra.width / 2);
+  const dy = rb.top + rb.height / 2 - (ra.top + ra.height / 2);
+  if (Math.abs(dx) > ra.width * 0.7) return dx > 0 ? ["right", "left"] : ["left", "right"];
+  return dy > 0 ? ["bottom", "top"] : ["top", "bottom"];
+}
+
+function cbPath(a, b) {
+  const dist = Math.hypot(b.x - a.x, b.y - a.y);
+  const k = Math.max(50, dist / 2.2);
+  const bdir = b.dir || [-1, 0];
+  const c1 = [a.x + a.dir[0] * k, a.y + a.dir[1] * k];
+  const c2 = [b.x + bdir[0] * k, b.y + bdir[1] * k];
+  return `M ${a.x.toFixed(1)} ${a.y.toFixed(1)} C ${c1[0].toFixed(1)} ${c1[1].toFixed(1)}, ${c2[0].toFixed(1)} ${c2[1].toFixed(1)}, ${b.x.toFixed(1)} ${b.y.toFixed(1)}`;
+}
+
+function cbWireClass() {
+  if (CB.draft.length < 2) return "";
+  const level = CB.probe && CB.probe.result ? CB.probe.result.level : "unknown";
+  if (level === "high") return " high";
+  return " warn";
+}
+
+function cbPacket(d, len, delay) {
+  const dur = Math.max(1.2, len / 220);
+  return `<circle r="4" class="cb-packet"><animateMotion dur="${dur.toFixed(2)}s" begin="${delay}s" repeatCount="indefinite" path="${d}"/></circle>`;
+}
+
+function cbDraw() {
+  const svg = document.getElementById("cb-wires");
+  if (!svg) return;
+  const client = document.getElementById("cb-client");
+  const internet = document.getElementById("cb-internet");
+  const segments = [];
+  let prevEl = client;
+  let from = cbEdge(client, "right");
+  CB.draft.forEach((code) => {
+    const el = cbEl(code);
+    if (!el) return;
+    if (prevEl === client) {
+      segments.push([from, cbEdge(el, "left")]);
+    } else {
+      const sides = cbSides(prevEl, el);
+      segments.push([cbEdge(prevEl, sides[0]), cbEdge(el, sides[1])]);
+    }
+    from = cbEdge(el, "right");
+    prevEl = el;
+  });
+  if (CB.linked && CB.draft.length) {
+    const lastEl = cbEl(CB.draft[CB.draft.length - 1]);
+    if (lastEl) segments.push([cbEdge(lastEl, "right"), cbEdge(internet, "left")]);
+  }
+  let html = "";
+  const cls = cbWireClass();
+  segments.forEach(([a, b]) => {
+    const d = cbPath(a, b);
+    const len = Math.hypot(b.x - a.x, b.y - a.y) * 1.15;
+    html += `<path class="cb-wire-under" d="${d}"/><path class="cb-wire flow${cls}" d="${d}"/>`;
+    html += cbPacket(d, len, 0) + cbPacket(d, len, (Math.max(1.2, len / 220)) / 2);
+    [a, b].forEach((pt) => {
+      if (pt.side === "top" || pt.side === "bottom") html += `<circle class="cb-dot" cx="${pt.x.toFixed(1)}" cy="${pt.y.toFixed(1)}" r="5"/>`;
+    });
+  });
+  if (CB.dragging) {
+    const tailEl = CB.draft.length ? cbEl(CB.draft[CB.draft.length - 1]) : client;
+    const start = cbEdge(tailEl || client, "right");
+    const d = cbPath(start, { x: CB.pointer.x, y: CB.pointer.y, dir: [-1, 0] });
+    html += `<path class="cb-wire live${cls}" d="${d}"/>`;
+  }
+  svg.innerHTML = html;
+}
+
+function cbScheduleDraw() {
+  if (CB.raf) return;
+  CB.raf = requestAnimationFrame(() => { CB.raf = 0; cbDraw(); });
+}
+
+function cbEstimateKey() {
+  return CB.draft.length === 2 ? CB.draft.join(">") : "";
+}
+
+async function cbProbe() {
+  const key = cbEstimateKey();
+  if (!key) { CB.probe = null; return; }
+  if (CB.probe && CB.probe.key === key) return;
+  const token = ++CB.probeToken;
+  CB.probe = { key, loading: true, result: null };
+  cbRenderInspector();
+  try {
+    const res = await api(`/admin/api/chains/probe?entry=${encodeURIComponent(CB.draft[0])}&exit=${encodeURIComponent(CB.draft[1])}`);
+    if (token !== CB.probeToken) return;
+    CB.probe = { key, loading: false, result: res };
+  } catch (e) {
+    if (token !== CB.probeToken) return;
+    CB.probe = { key, loading: false, result: { rtt_ms: null, level: "unknown", error: e.message } };
+  }
+  cbRenderInspector();
+  cbDraw();
+}
+
+function cbCallout(kind, icon, html) {
+  return `<div class="cb-callout ${kind}">${icon}<div>${html}</div></div>`;
+}
+
+const CB_ICONS = {
+  info: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01"/></svg>',
+  warn: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l10 18H2L12 3z"/><path d="M12 10v5M12 18h.01"/></svg>',
+  ok: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M8 12.5l2.5 2.5L16 9.5"/></svg>',
+};
+
+function cbRenderInspector() {
+  const names = CB.draft.map((c) => cbNode(c)).filter(Boolean);
+  const steps = [
+    { done: true, text: "Клиент" },
+    { done: names.length >= 1, text: names[0] ? cbFlagOf(names[0].label) + " " + cbPlainName(names[0].label) : "Сервер 1 — вход" },
+    { done: names.length >= 2, text: names[1] ? cbFlagOf(names[1].label) + " " + cbPlainName(names[1].label) : "Сервер 2 — выход (необязательно)" },
+    { done: CB.linked, text: "Интернет" },
+  ];
+  document.getElementById("cb-steps").innerHTML = steps.map((s, i) =>
+    `<div class="cb-step${s.done ? " done" : ""}"><span class="st">${s.done ? "✓" : i + 1}</span><span>${esc(s.text)}</span></div>`
+  ).join("");
+
+  let callouts = "";
+  const count = names.length;
+  if (count === 0) {
+    callouts = cbCallout("info", CB_ICONS.info, "Зажми левую кнопку мыши на <b>Клиенте</b> и протяни провод к серверу из пула. Не отпуская, веди дальше — через второй сервер к <b>Интернету</b>.");
+  } else if (count === 1 && !CB.linked) {
+    callouts = cbCallout("info", CB_ICONS.info, "Теперь протяни провод от этого сервера: ко второму серверу (получится цепочка) или сразу к <b>Интернету</b>.");
+  } else if (count === 1 && CB.linked) {
+    callouts = cbCallout("ok", CB_ICONS.ok, "Это обычное подключение: <b>клиент → сервер → интернет</b>. Оно уже есть у каждой ноды, отдельная цепочка не нужна. Добавь второй сервер, чтобы построить цепочку.");
+  } else {
+    const probe = CB.probe;
+    let rttHtml = "";
+    let level = "warn";
+    if (probe && probe.loading) {
+      rttHtml = '<div style="margin-top:8px"><span class="skeleton" style="display:inline-block;width:150px;height:14px"></span></div>';
+    } else if (probe && probe.result) {
+      const r = probe.result;
+      if (r.rtt_ms === null || r.rtt_ms === undefined) {
+        rttHtml = '<div style="margin-top:8px">Замерить задержку между серверами не получилось' + (r.error ? " (" + esc(r.error) + ")" : "") + " — но она точно будет.</div>";
+      } else {
+        const word = r.level === "high" ? "высокая" : (r.level === "medium" ? "заметная" : "умеренная");
+        rttHtml = `<div style="margin-top:8px">Замер между серверами: <b class="mono">${r.rtt_ms} мс</b> — ${word} добавочная задержка.</div>`;
+        if (r.level === "high") level = "high";
+      }
+    }
+    callouts = cbCallout(level, CB_ICONS.warn,
+      "<b>Высокая задержка.</b> Трафик пойдёт <b>клиент → сервер 1 → сервер 2 → интернет</b>: к обычному пингу добавляется ещё один прыжок, а скорость ограничена самым слабым звеном. Бери соседние регионы." + rttHtml);
+    if (cbDuplicate()) {
+      callouts += cbCallout("high", CB_ICONS.warn, "Такая цепочка уже существует.");
+    } else if (!CB.linked) {
+      callouts += cbCallout("info", CB_ICONS.info, "Замкни провод на <b>Интернет</b>, чтобы создать цепочку.");
+    }
+  }
+  document.getElementById("cb-callouts").innerHTML = callouts;
+  const ready = count === 2 && CB.linked && !cbDuplicate();
+  document.getElementById("cb-create").disabled = !ready;
+  const labelInput = document.getElementById("cb-label");
+  labelInput.placeholder = count === 2 ? `${names[0].label} → ${names[1].label}` : "Название (необязательно)";
+}
+
+function cbChanged() {
+  cbSyncNodes();
+  cbRenderInspector();
+  cbDraw();
+  cbProbe();
+}
+
+function cbAdd(code) {
+  if (CB.draft.length >= CB_MAX) return "Максимум 2 сервера в цепочке";
+  if (CB.draft.includes(code)) return "Этот сервер уже в цепочке";
+  const reason = cbEligible(cbNode(code), CB.draft.length);
+  if (reason) return reason;
+  CB.draft.push(code);
+  cbChanged();
+  return null;
+}
+
+function cbRemoveFrom(code) {
+  const idx = CB.draft.indexOf(code);
+  if (idx < 0) return;
+  CB.draft = CB.draft.slice(0, idx);
+  if (!CB.draft.length) CB.linked = false;
+  cbChanged();
+}
+
+function cbLink() {
+  if (!CB.draft.length || CB.linked) return false;
+  CB.linked = true;
+  cbChanged();
+  return true;
+}
+
+function cbReset() {
+  CB.draft = [];
+  CB.linked = false;
+  CB.probe = null;
+  CB.probeToken++;
+  document.getElementById("cb-label").value = "";
+  cbChanged();
+}
+
+function cbReject(code, reason) {
+  const el = code ? cbEl(code) : null;
+  if (el) {
+    el.classList.remove("shake");
+    void el.offsetWidth;
+    el.classList.add("shake");
+    setTimeout(() => el.classList.remove("shake"), 500);
+  }
+  if (CB.lastReject !== code + reason) {
+    CB.lastReject = code + reason;
+    toast(reason, "warn");
+  }
+}
+
+function cbRelPointer(e) {
+  const r = document.getElementById("cb-canvas").getBoundingClientRect();
+  return { x: e.clientX - r.left, y: e.clientY - r.top };
+}
+
+function cbClearTargets() {
+  document.querySelectorAll("#cb-canvas .target").forEach((el) => el.classList.remove("target"));
+}
+
+function cbOnDown(e) {
+  if (e.button !== 0) return;
+  if (e.target.closest(".cb-x")) return;
+  const node = e.target.closest(".cb-node");
+  if (!node) return;
+  const tail = CB.draft[CB.draft.length - 1];
+  const fromClient = node.id === "cb-client";
+  const fromTail = node.classList.contains("cb-server") && node.dataset.code === tail && !CB.linked;
+  if (!fromClient && !fromTail) return;
+  if (fromClient && CB.draft.length) {
+    CB.draft = [];
+    CB.linked = false;
+    CB.probe = null;
+    CB.probeToken++;
+  }
+  e.preventDefault();
+  CB.dragging = true;
+  CB.lastReject = null;
+  CB.pointer = cbRelPointer(e);
+  document.getElementById("cb-canvas").classList.add("dragging");
+  cbChanged();
+}
+
+const CB_DWELL = 240;
+
+function cbTargetAt(e) {
+  const under = document.elementFromPoint(e.clientX, e.clientY);
+  const node = under ? under.closest("#cb-canvas .cb-node") : null;
+  if (!node) return null;
+  if (node.classList.contains("cb-server")) {
+    const code = node.dataset.code;
+    if (CB.draft.includes(code)) return null;
+    return { key: "s:" + code, kind: "server", code, el: node };
+  }
+  if (node.id === "cb-internet") return { key: "internet", kind: "internet", el: node };
+  return null;
+}
+
+function cbRefuse(target) {
+  if (target.kind === "server") {
+    if (CB.draft.length >= CB_MAX) return "Максимум 2 сервера в цепочке";
+    return cbEligible(cbNode(target.code), CB.draft.length);
+  }
+  return CB.draft.length ? null : "Сначала протяни провод хотя бы через один сервер";
+}
+
+function cbCommit(target) {
+  if (target.kind === "server") {
+    cbAdd(target.code);
+    return false;
+  }
+  cbLink();
+  return true;
+}
+
+function cbHoverClear() {
+  if (CB.hover.timer) clearTimeout(CB.hover.timer);
+  CB.hover = { key: null, target: null, timer: 0 };
+  cbClearTargets();
+}
+
+function cbHoverCommit() {
+  const target = CB.hover.target;
+  if (!target || !CB.dragging) return;
+  cbHoverClear();
+  if (cbCommit(target)) cbEndDrag();
+}
+
+function cbOnMove(e) {
+  if (!CB.dragging) return;
+  CB.pointer = cbRelPointer(e);
+  const target = cbTargetAt(e);
+  const key = target ? target.key : null;
+  if (key !== CB.hover.key) {
+    cbHoverClear();
+    if (!target) {
+      CB.lastReject = null;
+    } else {
+      const reason = cbRefuse(target);
+      if (reason) {
+        cbReject(target.kind === "server" ? target.code : null, reason);
+      } else {
+        target.el.classList.add("target");
+        CB.hover = { key, target, timer: setTimeout(cbHoverCommit, CB_DWELL) };
+      }
+    }
+  }
+  cbScheduleDraw();
+}
+
+function cbEndDrag() {
+  if (!CB.dragging) return;
+  CB.dragging = false;
+  CB.suppressClick = true;
+  setTimeout(() => { CB.suppressClick = false; }, 0);
+  cbHoverClear();
+  document.getElementById("cb-canvas").classList.remove("dragging");
+  cbChanged();
+}
+
+function cbOnUp() {
+  if (!CB.dragging) return;
+  const target = CB.hover.target;
+  cbHoverClear();
+  if (target) cbCommit(target);
+  cbEndDrag();
+}
+
+function cbOnClick(e) {
+  if (CB.suppressClick) return;
+  const x = e.target.closest(".cb-x");
+  if (x) {
+    const node = x.closest(".cb-server");
+    if (node) cbRemoveFrom(node.dataset.code);
+    return;
+  }
+  const node = e.target.closest(".cb-node");
+  if (!node) return;
+  if (node.classList.contains("cb-server")) {
+    const code = node.dataset.code;
+    if (CB.draft.includes(code)) return;
+    const reason = cbAdd(code);
+    if (reason) cbReject(code, reason);
+  } else if (node.id === "cb-internet") {
+    if (!CB.draft.length) { cbReject(null, "Сначала добавь хотя бы один сервер"); return; }
+    cbLink();
+  }
+}
+
+async function cbCreate() {
+  if (CB.draft.length !== 2 || !CB.linked) return;
+  const btn = document.getElementById("cb-create");
+  btn.classList.add("loading");
+  try {
+    await api("/admin/api/chains", {
+      method: "POST",
+      body: JSON.stringify({ entry: CB.draft[0], exit: CB.draft[1], label: document.getElementById("cb-label").value.trim() }),
+    });
+    toast("Цепочка создана и применена на серверах", "success");
+    cbReset();
+    await loadChainsList();
+  } catch (e) {
+    toast(e.message, "error");
+  } finally {
+    btn.classList.remove("loading");
+  }
+}
+
+function cbWireLatency() {
+  CB.nodes.forEach((n) => {
+    const el = document.getElementById("cb-lat-" + n.code);
+    if (!el) return;
+    const ms = latencyCache[n.code];
+    if (!n.enabled || n.status !== "active") { el.textContent = ""; return; }
+    el.textContent = ms === null || ms === undefined ? "из панели: нет ответа" : "из панели: " + ms + " мс";
+  });
+}
+
+function chainNodeHtml(label) {
+  const flag = cbFlagOf(label);
+  return `<span class="cp-node">${flag || '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="6" rx="1.5"/><rect x="3" y="14" width="18" height="6" rx="1.5"/></svg>'}${esc(cbPlainName(label))}</span>`;
+}
+
+const ICON_CLIENT = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="12" rx="2"/><path d="M8 20h8M12 16v4"/></svg>';
+const ICON_GLOBE = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c3 3.2 3 14.8 0 18M12 3c-3 3.2-3 14.8 0 18"/></svg>';
+
+function renderChainsList() {
+  const box = document.getElementById("chains-list");
+  if (!CB.existing.length) {
+    box.innerHTML = '<div class="panel"><div class="empty" style="padding:30px 0">Цепочек пока нет — протяни провод в конструкторе выше</div></div>';
+    return;
+  }
+  box.innerHTML = CB.existing.map((c, i) => `
+    <div class="chain-card reveal${c.enabled ? "" : " off"}" style="animation-delay:${Math.min(i, 10) * 0.04}s" data-code="${esc(c.code)}">
+      <div class="chain-path">
+        <span class="cp-node" style="color:var(--accent)">${ICON_CLIENT}Клиент</span><span class="cp-link"></span>
+        ${chainNodeHtml(c.entry_label)}<span class="cp-link"></span>
+        ${chainNodeHtml(c.exit_label)}<span class="cp-link"></span>
+        <span class="cp-node" style="color:var(--blue)">${ICON_GLOBE}Интернет</span>
+      </div>
+      <div class="chain-meta"><div class="t">${esc(c.label)}</div><div class="s">порт ${c.port} · ${esc(c.code)}</div><div class="s" id="chain-check-${esc(c.code)}"></div></div>
+      <div class="chain-actions">
+        <label class="switch" title="${c.enabled ? "Выключить" : "Включить"}"><input type="checkbox" ${c.enabled ? "checked" : ""} onchange="toggleChain('${esc(c.code)}', this)"><span class="track"></span></label>
+        <button class="muted-btn" onclick="checkChain('${esc(c.code)}', this)">Проверить</button>
+        <button class="muted-btn red" onclick="deleteChain('${esc(c.code)}')">Удалить</button>
+      </div>
+    </div>`).join("");
+}
+
+async function loadChainsList() {
+  CB.existing = await api("/admin/api/chains");
+  renderChainsList();
+  const count = document.getElementById("nav-chains-count");
+  if (count) count.textContent = CB.existing.length ? String(CB.existing.length) : "";
+  cbRenderInspector();
+}
+
+async function toggleChain(code, input) {
+  const enabled = input.checked;
+  input.disabled = true;
+  try {
+    await api(`/admin/api/chains/${code}`, { method: "PATCH", body: JSON.stringify({ enabled }) });
+    toast(enabled ? "Цепочка включена" : "Цепочка выключена", "success");
+  } catch (e) {
+    input.checked = !enabled;
+    toast(e.message, "error");
+  } finally {
+    input.disabled = false;
+    loadChainsList();
+  }
+}
+
+async function checkChain(code, btn) {
+  const out = document.getElementById("chain-check-" + code);
+  btn.disabled = true;
+  out.textContent = "проверяю…";
+  try {
+    const r = await api(`/admin/api/chains/${code}/check`, { method: "POST" });
+    const hop = r.rtt_ms === null || r.rtt_ms === undefined ? "нет замера" : r.rtt_ms + " мс";
+    out.textContent = (r.entry_alive ? "вход отвечает" : "вход не отвечает") + " · переход между серверами: " + hop;
+    out.style.color = r.entry_alive ? "var(--green)" : "var(--red)";
+  } catch (e) {
+    out.textContent = "";
+    toast(e.message, "error");
+  } finally {
+    btn.disabled = false;
+  }
+}
+
+async function deleteChain(code) {
+  if (!(await askConfirm("Удалить цепочку? Она пропадёт из подписок, а настройки уберутся с обоих серверов."))) return;
+  try {
+    const r = await api(`/admin/api/chains/${code}`, { method: "DELETE" });
+    toast("Цепочка удалена", "success");
+    if (r.warnings && r.warnings.length) toast("Не всё удалось убрать сразу: " + r.warnings.join("; ") + ". Доделается при следующей синхронизации.", "warn", 8000);
+  } catch (e) {
+    toast(e.message, "error");
+  }
+  loadChainsList();
+}
+
+async function loadChains() {
+  if (!CB.ready) cbInit();
+  nodesCache = await api("/admin/api/nodes");
+  CB.nodes = nodesCache;
+  cbRenderPool();
+  cbDraw();
+  cbRenderInspector();
+  loadChainsList();
+  fetchLatency().then(() => { cbWireLatency(); }).catch(() => {});
+}
+
+function cbInit() {
+  CB.ready = true;
+  const canvas = document.getElementById("cb-canvas");
+  canvas.addEventListener("pointerdown", cbOnDown);
+  window.addEventListener("pointermove", cbOnMove);
+  window.addEventListener("pointerup", cbOnUp);
+  window.addEventListener("pointercancel", cbOnUp);
+  canvas.addEventListener("click", cbOnClick);
+  window.addEventListener("resize", cbScheduleDraw);
+  if (window.ResizeObserver) new ResizeObserver(cbScheduleDraw).observe(canvas);
+  document.addEventListener("keydown", (e) => {
+    if (e.key !== "Escape" || CMDK.open) return;
+    if (!document.getElementById("view-chains").classList.contains("active")) return;
+    if (document.activeElement && document.activeElement.tagName === "INPUT") return;
+    cbReset();
+  });
 }
 
 (async function init() {
   initDropdowns();
+  initAccent();
+  initCmdk();
   fetch("/api/branding").then((r) => r.json()).then((d) => applyBrandName(d.brand_name)).catch(() => {});
   try {
     const me = await api("/admin/api/me");