Связи UI: сияние и бейдж официального

- Добавлен визуальный эффект сияния вокруг круга для аккаунтов с флагом 'Сияющий'.

- Добавлен бейдж 'ОФ' над узлом для официальных аккаунтов.

shine-UI/js/pages/network-view.js

@@ -92,7 +92,14 @@ function spread(count, start, end) {
 function buildNodeElement({ login, kind = 'friend', isCenter = false, mark = null }) {
   const node = document.createElement('button');
   node.type = 'button';
-  node.className = `node ${isCenter ? 'center' : ''} ${kind === 'relative' ? 'is-relative' : 'is-friend'}`.trim();
+  const classes = [
+    'node',
+    isCenter ? 'center' : '',
+    kind === 'relative' ? 'is-relative' : 'is-friend',
+    mark?.shine ? 'is-shine' : '',
+    mark?.official ? 'is-official' : '',
+  ].filter(Boolean);
+  node.className = classes.join(' ');
   node.dataset.nodeLogin = login;
 
   const metaParts = [];
@@ -101,7 +108,9 @@ function buildNodeElement({ login, kind = 'friend', isCenter = false, mark = nul
   const metaText = metaParts.join(', ');
   node.title = metaText ? `${login}\n${metaText}` : login;
 
+  const officialBadge = mark?.official ? '<span class="node-badge-official" aria-hidden="true">ОФ</span>' : '';
   node.innerHTML = `
+    ${officialBadge}
     <span class="node-dot">${(login[0] || '?').toUpperCase()}</span>
     <span class="node-label">${login}</span>
   `;

shine-UI/styles/components.css

@@ -951,9 +951,11 @@ textarea.input {
   text-align: center;
   color: inherit;
   cursor: pointer;
+  z-index: 1;
 }
 
 .node-dot {
+  position: relative;
   width: 52px;
   height: 52px;
   margin: 0 auto 4px;
@@ -966,6 +968,41 @@ textarea.input {
   box-shadow: 0 8px 16px rgba(4, 8, 15, 0.35);
 }
 
+.node-badge-official {
+  position: absolute;
+  left: 50%;
+  top: -8px;
+  transform: translateX(-50%);
+  min-width: 26px;
+  height: 18px;
+  padding: 0 6px;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 214, 130, 0.95);
+  background: linear-gradient(180deg, rgba(255, 219, 145, 0.98), rgba(232, 165, 64, 0.98));
+  color: #3a2003;
+  font-size: 10px;
+  line-height: 16px;
+  font-weight: 800;
+  letter-spacing: 0.3px;
+  text-transform: uppercase;
+  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
+  z-index: 2;
+}
+
+.node.is-shine .node-dot::before {
+  content: '';
+  position: absolute;
+  inset: -7px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(130, 235, 255, 0.45) 0%, rgba(130, 235, 255, 0.18) 45%, rgba(130, 235, 255, 0) 72%);
+  filter: blur(1px);
+  z-index: -1;
+}
+
+.node.is-shine .node-dot {
+  box-shadow: 0 0 0 2px rgba(143, 231, 255, 0.38), 0 0 16px rgba(102, 220, 255, 0.38), 0 8px 16px rgba(4, 8, 15, 0.35);
+}
+
 .node.is-friend .node-dot {
   background: linear-gradient(165deg, #2f4f80, #2a3f62);
 }