UI: адаптация шапки «Связи», кнопка поиска каналов, локальный тестовый вход

- Связи: верхняя панель не выходит за границы экрана — кнопки назад/Найти/«?»
  не обрезаются на узких устройствах; заголовок сокращается вместо сдвига кнопок.
- Каналы: emoji-иконка поиска заменена на контурную кнопку-лупу в стиле панели
  (подсказка «Найти канал»); окно поиска без изменений.
- Локальный тестовый вход: на localhost/127.0.0.1/::1 — кнопка демо-входа
  (сеанс local-tester, автономные локальные состояния ЛС/каналов/профиля, без
  сервера и пароля); на shineup.me и тестовых доменах кнопка отсутствует.
- Заметки на ручную проверку добавлены в Dev_Docs/Pending_Features.
- VERSION: client 1.2.262.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Dev_Docs/Pending_Features/2026-07-14_1745_адаптация-шапки-связей.md

@@ -0,0 +1,16 @@
+# Адаптация верхней панели экрана «Связи»
+
+## Краткое описание
+- Экран графа связей больше не расширяется за границы контейнера. Верхняя панель ограничена границами экрана, чтобы кнопки возврата, поиска и справки не обрезались на узких устройствах.
+
+## Что проверить
+- Открыть экран «Связи» на ширине около 320, 390 и 794 px.
+- Убедиться, что кнопки возврата, «Найти» и «?» полностью видны и нажимаются.
+- Убедиться, что фильтры и граф связей остаются доступными.
+
+## Ожидаемый результат
+- Верхние действия не выходят за левую или правую границу приложения.
+- Заголовок при нехватке места сокращается, а не сдвигает кнопки за край.
+
+## Статус
+- `pending` — локальная проверка на ширине 320 и 794 px пройдена; нужна ручная проверка после публикации на тестовом или production-стенде.

Dev_Docs/Pending_Features/2026-07-14_1830_кнопка-поиска-каналов.md

@@ -0,0 +1,16 @@
+# Кнопка поиска каналов
+
+## Краткое описание
+- Emoji-иконка поиска в верхней панели «Каналов» заменена на контурную кнопку-лупу в стиле интерфейса.
+
+## Что проверить
+- Открыть список каналов.
+- Убедиться, что кнопка поиска видна рядом с кнопкой создания канала и имеет подсказку «Найти канал».
+- Нажать кнопку и убедиться, что открывается прежнее окно поиска каналов.
+
+## Ожидаемый результат
+- Кнопка выглядит как часть общей тёмной панели и не использует emoji.
+- Поиск каналов работает без изменений.
+
+## Статус
+- `pending` — локальная визуальная проверка и открытие окна поиска пройдены; нужна ручная проверка после публикации на тестовом или production-стенде.

Dev_Docs/Pending_Features/2026-07-14_1915_локальный-тестовый-вход.md

@@ -0,0 +1,20 @@
+# Локальный тестовый вход
+
+## Краткое описание
+- На `localhost`, `127.0.0.1` и `::1` доступна кнопка «Локальный тестовый вход».
+- Она создаёт только локальный демо-сеанс `local-tester`; пароль, серверная сессия и production не используются.
+- Экран личных сообщений и список каналов открывают автономные локальные состояния без запроса к серверу.
+- Профиль заполняется демонстрационными данными, чтобы интерфейс можно было проверить без серверного пользователя.
+
+## Что проверить
+- Открыть локальный UI и нажать «Локальный тестовый вход».
+- Проверить переход к списку сообщений и доступ к экранам профиля, каналов, связей и настроек.
+- Обновить страницу и убедиться, что локальный сеанс сохраняется.
+- Выйти из сеанса и убедиться, что снова открывается экран старта.
+
+## Ожидаемый результат
+- Локальный режим даёт возможность изучить интерфейс без реальной авторизации.
+- На `shineup.me` и тестовых доменах кнопка отсутствует.
+
+## Статус
+- `pending` — локальный вход, переход к профилю и демонстрационные каналы проверены; нужна ручная проверка выхода из сеанса после публикации на тестовом или production-стенде.

VERSION.properties

@@ -1,2 +1,2 @@
-client.version=1.2.261
+client.version=1.2.262
 server.version=1.2.246

shine-UI/index.html

@@ -9,8 +9,8 @@
     <link rel="apple-touch-icon" href="./img/logo.jpg" />
     <title>СИЯНИЕ</title>
     <script>
-      window.__SHINE_BUILD_HASH__ = '20260616130000';
-      window.__SHINE_CLIENT_VERSION__ = '1.2.8';
+      window.__SHINE_BUILD_HASH__ = '20260715091000';
+      window.__SHINE_CLIENT_VERSION__ = '1.2.10';
     </script>
     <script>
       (function attachStylesWithBuildHash() {

shine-UI/js/app.js

@@ -48,7 +48,7 @@ import * as loginOtherDeviceView from './pages/login-other-device-view.js?v=2026
 import * as loginPasswordView from './pages/login-password-view.js?v=202606201650';
 import * as keyStorageView from './pages/key-storage-view.js';
 
-import * as profileView from './pages/profile-view.js';
+import * as profileView from './pages/profile-view.js?v=202607150910';
 import * as profileEditView from './pages/profile-edit-view.js';
 import * as walletView from './pages/wallet-view.js?v=202605300007';
 import * as settingsView from './pages/settings-view.js';
@@ -490,6 +490,10 @@ function startPeriodicUiVersionCheck() {
 }
 
 async function checkConnectionHealth() {
+  if (state.session.isLocalDemo) {
+    setConnectionStatus('connected');
+    return;
+  }
   if (connectionCheckInFlight) return;
   connectionCheckInFlight = true;
   if (connectionState !== 'connected') {
@@ -520,6 +524,10 @@ async function checkConnectionHealth() {
 }
 
 function startConnectionMonitor() {
+  if (state.session.isLocalDemo) {
+    setConnectionStatus('connected');
+    return;
+  }
   if (pingIntervalId) {
     window.clearInterval(pingIntervalId);
     pingIntervalId = null;
@@ -733,6 +741,7 @@ function renderApp() {
 
     const showAppChrome = page.pageMeta?.showAppChrome !== false;
     screenEl.classList.toggle('no-app-chrome', !showAppChrome);
+    screenEl.classList.toggle('preauth-flow', PRE_AUTH_PAGES.includes(pageId));
 
     toolbarEl.innerHTML = '';
     if (showAppChrome) {
@@ -746,6 +755,7 @@ function renderApp() {
 }
 
 async function tryAutoLogin() {
+  if (state.session.isLocalDemo) return;
   if (!state.session.login || !state.session.sessionId) return;
   try {
     await authService.reconnect(state.entrySettings.shineServer);
@@ -766,6 +776,7 @@ async function tryAutoLogin() {
 }
 
 async function ensureSessionRuntimeStarted() {
+  if (state.session.isLocalDemo) return;
   if (!state.session.isAuthorized || sessionRuntimeStarted) return;
   sessionRuntimeStarted = true;
 
@@ -810,6 +821,10 @@ async function ensureSessionRuntimeStarted() {
 async function init() {
   consumeCallPushActionFromUrlIfAny();
 
+  if (state.session.isLocalDemo) {
+    setConnectionStatus('connected');
+  }
+
   addAppLogEntry({
     level: 'info',
     source: 'app',
@@ -1073,8 +1088,10 @@ async function init() {
     try {
       await tryAutoLogin();
       await hydrateMessagesFromStore();
-      startConnectionMonitor();
-      startPeriodicUiVersionCheck();
+      if (!state.session.isLocalDemo) {
+        startConnectionMonitor();
+        startPeriodicUiVersionCheck();
+      }
       await ensureSessionRuntimeStarted();
     } finally {
       renderApp();

shine-UI/js/pages/channels-list.js

@@ -754,22 +754,25 @@ function renderErrorState(container, error, onRetry) {
   container.append(errCard);
 }
 
-function renderDemoFallback(container, navigate, error, onRetry) {
+function renderDemoFallback(container, navigate, error, onRetry, { localOnly = false } = {}) {
   const info = document.createElement('div');
   info.className = 'card stack';
   info.innerHTML = `
-    <strong>Включен демо-режим</strong>
-    <p class="meta-muted">Данные сервера недоступны. Показаны мок-каналы, потому что включен channelsDemo.</p>
-    <p class="meta-muted">${toUserMessage(error, 'Ошибка API/WS')}</p>
+    <strong>${localOnly ? 'Локальный тестовый режим' : 'Включен демо-режим'}</strong>
+    <p class="meta-muted">${localOnly
+      ? 'Показаны мок-каналы. Подключение к серверу отключено.'
+      : 'Данные сервера недоступны. Показаны мок-каналы, потому что включен channelsDemo.'}</p>
+    ${localOnly ? '' : `<p class="meta-muted">${toUserMessage(error, 'Ошибка API/WS')}</p>`}
   `;
 
-  const retry = document.createElement('button');
-  retry.className = 'secondary-btn';
-  retry.type = 'button';
-  retry.textContent = 'Повторить запрос к серверу';
-  retry.addEventListener('click', onRetry);
-
-  info.append(retry);
+  if (!localOnly && typeof onRetry === 'function') {
+    const retry = document.createElement('button');
+    retry.className = 'secondary-btn';
+    retry.type = 'button';
+    retry.textContent = 'Повторить запрос к серверу';
+    retry.addEventListener('click', onRetry);
+    info.append(retry);
+  }
   container.append(info);
 
   const groups = mapMockGroups();
@@ -1090,6 +1093,14 @@ async function loadFeedAndRender({ screen, listState, contentEl, navigate }) {
     return;
   }
 
+  if (state.session.isLocalDemo) {
+    setChannelsFeed(null, {});
+    listState.channels = [];
+    contentEl.innerHTML = '';
+    renderDemoFallback(contentEl, navigate, null, null, { localOnly: true });
+    return;
+  }
+
   try {
     const feed = await authService.listSubscriptionsFeed(state.session.login, 200);
     const groups = mapApiFeed(feed, listState.notificationsState);
@@ -1160,8 +1171,12 @@ export function render({ navigate, route }) {
   const findChannelBtn = document.createElement('button');
   findChannelBtn.type = 'button';
   findChannelBtn.className = 'icon-btn channels-top-search-btn';
-  findChannelBtn.textContent = '🔎';
   findChannelBtn.setAttribute('aria-label', 'Найти канал');
+  findChannelBtn.title = 'Найти канал';
+  const findChannelIcon = document.createElement('span');
+  findChannelIcon.className = 'channels-search-icon';
+  findChannelIcon.setAttribute('aria-hidden', 'true');
+  findChannelBtn.append(findChannelIcon);
   findChannelBtn.addEventListener('click', () => openChannelFinderModal({ navigate }));
 
   const createInMyBtn = document.createElement('button');

shine-UI/js/pages/entry-settings-view.js

@@ -1,5 +1,10 @@
 import { renderHeader } from '../components/header.js';
-import { saveEntrySettings, state } from '../state.js';
+import {
+  authorizeLocalDemoSession,
+  isLocalDemoAvailable,
+  saveEntrySettings,
+  state,
+} from '../state.js';
 import { checkServerAvailabilityByKey, resolveAndCheckShineServerLogin } from '../services/server-health-service.js';
 
 export const pageMeta = { id: 'entry-settings-view', title: 'Настройки входа', showAppChrome: false };
@@ -141,6 +146,18 @@ export function render({ navigate }) {
   const actions = document.createElement('div');
   actions.className = 'auth-footer-actions';
 
+  if (isLocalDemoAvailable()) {
+    const localDemoButton = document.createElement('button');
+    localDemoButton.className = 'ghost-btn preauth-local-demo-btn';
+    localDemoButton.type = 'button';
+    localDemoButton.textContent = 'Открыть локальный тестовый режим';
+    localDemoButton.addEventListener('click', () => {
+      if (!authorizeLocalDemoSession()) return;
+      navigate('messages-list');
+    });
+    actions.append(localDemoButton);
+  }
+
   const serverUiButton = document.createElement('button');
   serverUiButton.className = 'ghost-btn';
   serverUiButton.type = 'button';

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

@@ -4,7 +4,7 @@ export const pageMeta = { id: 'login-view', title: 'Войти', showAppChrome:
 
 export function render({ navigate }) {
   const screen = document.createElement('section');
-  screen.className = 'stack auth-screen auth-screen--lower';
+  screen.className = 'stack auth-screen auth-screen--lower login-choice-screen';
 
   const loginButton = document.createElement('button');
   loginButton.className = 'ghost-btn';
@@ -22,20 +22,14 @@ export function render({ navigate }) {
   actions.className = 'auth-actions login-actions-wide';
   actions.append(loginButton, otherDeviceButton);
 
-  const backButton = document.createElement('button');
-  backButton.className = 'ghost-btn';
-  backButton.type = 'button';
-  backButton.textContent = 'Назад';
-  backButton.addEventListener('click', () => navigate('start-view'));
-
   const panel = document.createElement('section');
   panel.className = 'login-panel stack';
   panel.innerHTML = '<h1 class="login-panel-title">Войти</h1>';
-  panel.append(actions, backButton);
+  panel.append(actions);
 
   screen.append(
     renderHeader({
-      title: 'Войти',
+      title: '',
       leftAction: { label: '←', onClick: () => navigate('start-view') },
     }),
     panel,

shine-UI/js/pages/messages-list.js

@@ -132,6 +132,14 @@ export function render({ navigate }) {
   }
 
   async function loadList() {
+    if (state.session.isLocalDemo) {
+      const empty = document.createElement('div');
+      empty.className = 'card meta-muted';
+      empty.textContent = 'Локальный тестовый режим: реальные сообщения и контакты не загружаются.';
+      list.replaceChildren(empty);
+      return;
+    }
+
     try {
       const relations = await loadCurrentRelations();
       const contacts = relations.outContacts || [];

shine-UI/js/pages/profile-edit-view.js

@@ -96,7 +96,7 @@ export function render({ navigate }) {
   screen.append(
     renderHeader({
       title: 'Редактирование профиля',
-      leftAction: { label: '←', onClick: () => navigate('profile-view') },
+      leftAction: { label: '←', onClick: () => navigate('settings-view') },
     }),
   );
 

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

@@ -7,7 +7,6 @@ import {
 } from '../services/user-profile-params.js';
 import { buildIdentityLines } from '../services/user-connections.js';
 import { renderUserAvatar } from '../components/avatar-image.js';
-import { makeProfileLinksRoute } from '../services/shine-routes.js';
 
 export const pageMeta = { id: 'profile-view', title: 'Профиль' };
 
@@ -30,20 +29,49 @@ function escapeHtml(text) {
     .replaceAll("'", ''');
 }
 
+function renderProfileInfoText(text) {
+  const [intro, details] = String(text || '').split(/\n\n/, 2);
+  if (!details) {
+    return `<p class="profile-info-modal__lead">${escapeHtml(intro)}</p>`;
+  }
+
+  const [sectionTitle, ...items] = details.split('\n').filter(Boolean);
+  return `
+    <p class="profile-info-modal__lead">${escapeHtml(intro)}</p>
+    <section class="profile-info-modal__section" aria-label="${escapeHtml(sectionTitle)}">
+      <p class="profile-info-modal__section-title">${escapeHtml(sectionTitle)}</p>
+      <ol class="profile-info-modal__list">
+        ${items.map((item) => `<li>${escapeHtml(item.replace(/^\d+\)\s*/, ''))}</li>`).join('')}
+      </ol>
+    </section>
+  `;
+}
+
 function openProfileInfoModal({ title, text }) {
   const root = document.getElementById('modal-root');
   if (!root) return;
   root.innerHTML = `
-    <div class="modal" id="profile-info-modal">
-      <div class="modal-card stack">
-        <h3 class="modal-title">${escapeHtml(title)}</h3>
-        <p class="meta-muted" style="white-space: pre-wrap; line-height: 1.45;">${escapeHtml(text)}</p>
-        <button class="secondary-btn" type="button" id="profile-info-close">Закрыть</button>
-      </div>
+    <div class="modal profile-info-modal" id="profile-info-modal" role="dialog" aria-modal="true" aria-labelledby="profile-info-title">
+      <section class="modal-card profile-info-modal__card stack">
+        <header class="profile-info-modal__header">
+          <div>
+            <p class="profile-info-modal__eyebrow">Информация</p>
+            <h3 class="modal-title profile-info-modal__title" id="profile-info-title">${escapeHtml(title)}</h3>
+          </div>
+          <button class="profile-info-modal__close" type="button" id="profile-info-close-icon" aria-label="Закрыть" title="Закрыть">&times;</button>
+        </header>
+        <div class="profile-info-modal__content">
+          ${renderProfileInfoText(text)}
+        </div>
+        <footer class="profile-info-modal__footer">
+          <button class="secondary-btn profile-info-modal__confirm" type="button" id="profile-info-close">Готово</button>
+        </footer>
+      </section>
     </div>
   `;
   const close = () => { root.innerHTML = ''; };
   root.querySelector('#profile-info-close')?.addEventListener('click', close);
+  root.querySelector('#profile-info-close-icon')?.addEventListener('click', close);
   root.querySelector('#profile-info-modal')?.addEventListener('click', (event) => {
     if (event.target?.id === 'profile-info-modal') close();
   });
@@ -73,22 +101,9 @@ export function render({ navigate }) {
   const topActions = document.createElement('div');
   topActions.className = 'profile-top-actions';
   topActions.innerHTML = `
-    <button class="ghost-btn profile-top-action-btn" type="button" data-top-action="edit">Редактировать профиль</button>
-    <button class="ghost-btn profile-top-action-btn" type="button" data-top-action="settings">Настройки</button>
+    <button class="ghost-btn profile-top-action-btn profile-top-menu-btn" type="button" data-top-action="settings" aria-label="Настройки" title="Настройки">⋮</button>
   `;
-  topActions.querySelector('[data-top-action="edit"]')?.addEventListener('click', () => navigate('profile-edit-view'));
   topActions.querySelector('[data-top-action="settings"]')?.addEventListener('click', () => navigate('settings-view'));
-  screen.append(topActions);
-
-  const bottomActions = document.createElement('div');
-  bottomActions.className = 'profile-bottom-actions';
-  bottomActions.innerHTML = `
-    <button class="ghost-btn profile-top-action-btn" type="button" data-bottom-action="wallet">Кошелёк</button>
-    <button class="ghost-btn profile-top-action-btn profile-links-two-line" type="button" data-bottom-action="links">Показать\nсвязи</button>
-  `;
-  bottomActions.querySelector('[data-bottom-action="wallet"]')?.addEventListener('click', () => navigate('wallet-view'));
-  bottomActions.querySelector('[data-bottom-action="links"]')?.addEventListener('click', () => navigate(makeProfileLinksRoute(login)));
-  screen.append(bottomActions);
 
   const card = document.createElement('div');
   card.className = 'card stack profile-main-card';
@@ -203,6 +218,27 @@ export function render({ navigate }) {
   }
 
   async function refreshProfileSnapshot() {
+    if (state.session.isLocalDemo) {
+      currentFields = [
+        { key: 'first_name', label: 'Имя', value: 'Тестовый' },
+        { key: 'last_name', label: 'Фамилия', value: 'Пользователь' },
+        { key: 'address', label: 'Адрес', value: 'Локальный режим' },
+        { key: 'website', label: 'Веб', value: '127.0.0.1' },
+        { key: 'phone', label: 'Телефон', value: profile.phone },
+      ];
+      currentToggles = [
+        { key: 'official', enabled: false },
+        { key: 'shine', enabled: false },
+      ];
+      currentGender = 'unknown';
+      currentAvatar = { value: '', source: '', txId: '', sha256Hex: '', timeMs: 0 };
+      syncIdentity();
+      updateAvatarUi();
+      updateTogglesUi();
+      renderFields(currentFields);
+      return;
+    }
+
     try {
       const snapshot = await loadProfileSnapshot(login);
       currentFields = Array.isArray(snapshot.fields) ? snapshot.fields : [];
@@ -218,7 +254,7 @@ export function render({ navigate }) {
     }
   }
 
-  card.append(topRow, badgesRow, listWrap);
+  card.append(topActions, topRow, badgesRow, listWrap);
   screen.append(card);
 
   updateAvatarUi();

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

@@ -14,7 +14,6 @@ import {
   PASSWORD_WORDS_COUNT,
 } from '../services/password-words.js';
 import { openRegistrationFaq } from './registration-faq-view.js';
-import { defaultServerHttp } from '../deploy-config.js';
 
 export const pageMeta = { id: 'register-view', title: 'Зарегистрироваться', showAppChrome: false };
 
@@ -53,21 +52,18 @@ function createWordsLayout({ words, onInput }) {
   hint.textContent =
     'Здесь можно ввести любые слова на любых языках. Мы не проверяем орфографию. Можно заполнить все 12 полей или только часть. В конце всё склеивается в один пароль длиной до 256 символов.';
 
-  const preview = document.createElement('p');
-  preview.className = 'status-line';
-
   section.append(grid, hint);
-  return { section, inputs, preview };
+  return { section, inputs };
 }
 
 export function render({ navigate }) {
   const screen = document.createElement('section');
-  screen.className = 'stack';
+  screen.className = 'stack registration-screen';
 
   clearAuthMessages();
 
   const form = document.createElement('div');
-  form.className = 'card stack';
+  form.className = 'card stack registration-form';
 
   let passwordMode = String(state.registrationDraft.passwordMode || 'single') === 'words' ? 'words' : 'single';
   let passwordWords = normalizePasswordWords(state.registrationDraft.passwordWords);
@@ -95,7 +91,6 @@ export function render({ navigate }) {
   const {
     section: wordsSection,
     inputs: wordInputs,
-    preview: wordsPreview,
   } = createWordsLayout({
     words: passwordWords,
     onInput: (index, value) => {
@@ -118,53 +113,22 @@ export function render({ navigate }) {
   passwordModeToggle.append(passwordModeCheckbox, passwordModeLabel);
 
   const statusText = document.createElement('p');
-  statusText.className = 'meta-muted';
-  statusText.textContent = 'Проверка логина: не выполнена';
-
-  const serverNotice = document.createElement('div');
-  serverNotice.className = 'card stack';
-  serverNotice.innerHTML = `
-    <p class="field-label">Первый сервер SHiNE</p>
-    <p class="meta-muted">При регистрации адресом вашего первого сервера будет: <strong>${state.entrySettings.shineServerHttp || defaultServerHttp}</strong>.</p>
-  `;
-
-  const faqCard = document.createElement('div');
-  faqCard.className = 'card stack registration-faq-card';
-
-  const faqTitle = document.createElement('p');
-  faqTitle.className = 'field-label';
-  faqTitle.textContent = 'Частые вопросы перед регистрацией';
-
-  const faqText = document.createElement('p');
-  faqText.className = 'meta-muted';
-  faqText.textContent = 'Если хотите подробнее понять схему деривации, ключи, первый сервер и формат 12 слов, откройте отдельный экран с вопросами.';
+  statusText.className = 'status-line registration-login-status';
+  statusText.style.display = 'none';
 
   const faqButton = document.createElement('button');
-  faqButton.className = 'ghost-btn';
+  faqButton.className = 'registration-faq-link';
   faqButton.type = 'button';
-  faqButton.textContent = 'Частые вопросы';
+  faqButton.textContent = 'Вопросы о регистрации';
   faqButton.addEventListener('click', () => openRegistrationFaq(navigate, 'key-derivation'));
 
-  faqCard.append(faqTitle, faqText, faqButton);
-
   const formError = document.createElement('p');
   formError.className = 'status-line is-unavailable';
   formError.style.display = 'none';
 
-  const checkButton = document.createElement('button');
-  checkButton.className = 'ghost-btn';
-  checkButton.type = 'button';
-  checkButton.textContent = 'Проверить логин';
-
   const actions = document.createElement('div');
   actions.className = 'auth-footer-actions';
 
-  const backButton = document.createElement('button');
-  backButton.className = 'ghost-btn';
-  backButton.type = 'button';
-  backButton.textContent = 'Назад';
-  backButton.addEventListener('click', () => navigate('start-view'));
-
   const nextButton = document.createElement('button');
   nextButton.className = 'primary-btn';
   nextButton.type = 'button';
@@ -172,10 +136,12 @@ export function render({ navigate }) {
 
   let passwordField = null;
   const passwordLengthText = document.createElement('p');
-  passwordLengthText.className = 'status-line';
+  passwordLengthText.className = 'password-length-hint';
   let lastCheckedLogin = '';
   let lastCheckedFree = false;
   let lastCheckedClassName = '';
+  let loginCheckTimer = null;
+  let loginCheckRunId = 0;
   let generationRunId = 0;
 
   function getCurrentPassword() {
@@ -185,7 +151,6 @@ export function render({ navigate }) {
   function updateWordsPreview() {
     const password = getCurrentPassword();
     const text = `Итоговая длина пароля: ${password.length} символов.`;
-    wordsPreview.textContent = text;
     passwordLengthText.textContent = text;
   }
 
@@ -207,7 +172,8 @@ export function render({ navigate }) {
   async function runAvailabilityCheck() {
     const login = loginInput.value.trim();
     if (!login) {
-      statusText.textContent = 'Введите логин';
+      statusText.textContent = '';
+      statusText.style.display = 'none';
       formError.style.display = 'none';
       return false;
     }
@@ -229,12 +195,15 @@ export function render({ navigate }) {
         statusText.textContent = 'Логин нельзя использовать для обычной регистрации ❌';
         statusText.className = 'status-line is-unavailable';
       }
+      statusText.style.display = '';
       formError.style.display = 'none';
       return lastCheckedFree && lastCheckedClassName === 'free';
     }
 
-    checkButton.disabled = true;
-    checkButton.textContent = 'Проверка...';
+    const runId = ++loginCheckRunId;
+    statusText.className = 'status-line registration-login-status';
+    statusText.textContent = 'Проверяем логин...';
+    statusText.style.display = '';
     try {
       const check = await checkLoginExistsOnSolana({
         login,
@@ -255,6 +224,7 @@ export function render({ navigate }) {
           precheckWarning = formatSolanaErrorDetails(precheckError);
         }
       }
+      if (runId !== loginCheckRunId) return false;
       lastCheckedLogin = login;
       lastCheckedFree = isFree;
       lastCheckedClassName = className;
@@ -276,25 +246,31 @@ export function render({ navigate }) {
         statusText.textContent = 'Логин нельзя использовать для обычной регистрации ❌';
         statusText.className = 'status-line is-unavailable';
       }
+      statusText.style.display = '';
       formError.style.display = 'none';
       return isFree && className === 'free';
     } catch (error) {
+      if (runId !== loginCheckRunId) return false;
       const base = toUserMessage(error, 'Не удалось проверить логин');
       const details = formatSolanaErrorDetails(error);
       statusText.textContent = `${base}. Детали: ${details}`;
       statusText.className = 'status-line is-unavailable';
+      statusText.style.display = '';
       return false;
-    } finally {
-      checkButton.disabled = false;
-      checkButton.textContent = 'Проверить логин';
     }
   }
 
-  checkButton.addEventListener('click', runAvailabilityCheck);
-
   loginInput.addEventListener('input', () => {
     syncDraftState();
     lastCheckedLogin = '';
+    loginCheckRunId += 1;
+    if (loginCheckTimer) window.clearTimeout(loginCheckTimer);
+    statusText.textContent = '';
+    statusText.style.display = 'none';
+    if (!loginInput.value.trim()) return;
+    loginCheckTimer = window.setTimeout(() => {
+      runAvailabilityCheck();
+    }, 450);
   });
 
   passwordInput.addEventListener('input', () => {
@@ -353,8 +329,6 @@ export function render({ navigate }) {
   });
 
   function renderInputStage() {
-    serverNotice.style.display = '';
-    faqCard.style.display = '';
     form.innerHTML = `
       <label class="stack"><span class="field-label">Логин</span></label>
       <label class="stack registration-password-single"><span class="field-label">Пароль</span></label>
@@ -362,17 +336,15 @@ export function render({ navigate }) {
     const loginField = form.children[0];
     passwordField = form.children[1];
     loginField.append(loginInput);
-    passwordField.append(passwordInput);
-    form.append(passwordModeToggle, passwordLengthText, wordsSection, statusText, checkButton, formError);
+    passwordField.append(passwordInput, passwordLengthText);
+    form.append(passwordModeToggle, wordsSection, statusText, formError);
     actions.innerHTML = '';
-    actions.append(backButton, nextButton);
+    actions.append(nextButton);
     updatePasswordModeVisibility();
     syncDraftState();
   }
 
   async function startGenerationStage() {
-    serverNotice.style.display = 'none';
-    faqCard.style.display = 'none';
     const runId = ++generationRunId;
     form.innerHTML = '';
 
@@ -478,8 +450,7 @@ export function render({ navigate }) {
       leftAction: { label: '←', onClick: () => navigate('start-view') },
     }),
     form,
-    serverNotice,
-    faqCard,
+    faqButton,
     actions,
   );
 

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

@@ -1,5 +1,6 @@
 import { renderHeader } from '../components/header.js';
-import { addAppLogEntry, authService, closeCurrentSessionAndSignOut } from '../state.js';
+import { addAppLogEntry, authService, closeCurrentSessionAndSignOut, state } from '../state.js';
+import { makeProfileLinksRoute } from '../services/shine-routes.js';
 
 export const pageMeta = { id: 'settings-view', title: 'Настройки' };
 
@@ -40,6 +41,9 @@ export function render({ navigate }) {
   const card = document.createElement('div');
   card.className = 'card stack';
   card.innerHTML = `
+    <button class="text-btn" type="button" id="settings-profile-edit">Редактировать профиль</button>
+    <button class="text-btn" type="button" id="settings-wallet">Кошелёк</button>
+    <button class="text-btn" type="button" id="settings-links">Показать связи</button>
     <button class="text-btn" type="button" id="settings-device">Устройства</button>
     <button class="text-btn" type="button" id="settings-servers">Настройки серверов</button>
     <button class="text-btn" type="button" id="settings-tools">Настройки инструментов ввода</button>
@@ -47,6 +51,11 @@ export function render({ navigate }) {
     <button class="text-btn" type="button" id="settings-signout">Завершить текущий сеанс</button>
   `;
 
+  card.querySelector('#settings-profile-edit').addEventListener('click', () => navigate('profile-edit-view'));
+  card.querySelector('#settings-wallet').addEventListener('click', () => navigate('wallet-view'));
+  card.querySelector('#settings-links').addEventListener('click', () => {
+    navigate(makeProfileLinksRoute(state.session.login));
+  });
   card.querySelector('#settings-device').addEventListener('click', () => navigate('device-view'));
   card.querySelector('#settings-servers').addEventListener('click', () => navigate('server-settings-view'));
   card.querySelector('#settings-tools').addEventListener('click', () => navigate('tools-settings-view'));

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

@@ -6,45 +6,49 @@ export function render({ navigate }) {
   clearStartHint();
 
   const screen = document.createElement('section');
-  screen.className = 'auth-screen stack';
+  screen.className = 'auth-screen auth-screen--welcome';
+
+  const logoWrap = document.createElement('div');
+  logoWrap.className = 'auth-logo-wrap';
 
   const logo = document.createElement('img');
   logo.className = 'auth-logo';
-  logo.src = './img/logo.jpg';
+  logo.src = './img/shine-logo-transparent-final.png';
   logo.alt = 'Логотип Сияние';
+  logoWrap.append(logo);
 
   const title = document.createElement('h1');
   title.className = 'auth-brand';
   title.textContent = 'Сияние';
 
   const actions = document.createElement('div');
-  actions.className = 'auth-actions';
+  actions.className = 'auth-actions shine-actions';
 
   const loginButton = document.createElement('button');
-  loginButton.className = 'primary-btn';
+  loginButton.className = 'shine-btn shine-btn--primary';
   loginButton.type = 'button';
   loginButton.textContent = 'Войти';
   loginButton.addEventListener('click', () => navigate('login-view'));
 
   const registerButton = document.createElement('button');
-  registerButton.className = 'ghost-btn';
+  registerButton.className = 'shine-btn shine-btn--register';
   registerButton.type = 'button';
   registerButton.textContent = 'Зарегистрироваться';
   registerButton.addEventListener('click', () => navigate('register-view'));
 
   const guestViewButton = document.createElement('button');
-  guestViewButton.className = 'ghost-btn';
+  guestViewButton.className = 'shine-btn shine-btn--view';
   guestViewButton.type = 'button';
   guestViewButton.textContent = 'Только просмотр';
   guestViewButton.addEventListener('click', () => navigate('network-view'));
 
   const settingsButton = document.createElement('button');
-  settingsButton.className = 'ghost-btn';
+  settingsButton.className = 'shine-btn shine-btn--settings';
   settingsButton.type = 'button';
   settingsButton.textContent = 'Настройки';
   settingsButton.addEventListener('click', () => navigate('entry-settings-view'));
 
   actions.append(loginButton, registerButton, guestViewButton, settingsButton);
-  screen.append(logo, title, actions);
+  screen.append(logoWrap, title, actions);
   return screen;
 }

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

@@ -81,7 +81,7 @@ export function render({ navigate }) {
   screen.append(
     renderHeader({
       title: 'Кошелёк',
-      leftAction: { label: '←', onClick: () => navigate('profile-view') },
+      leftAction: { label: '←', onClick: () => navigate('settings-view') },
     }),
     content,
     status,

shine-UI/js/state.js

@@ -25,6 +25,11 @@ const INVALID_SESSION_CODES = new Set([
   'SESSION_OF_ANOTHER_USER',
 ]);
 
+function isLocalPreviewHost() {
+  const host = String(window.location.hostname || '').toLowerCase();
+  return host === 'localhost' || host === '127.0.0.1' || host === '::1';
+}
+
 function readLocalWsOverrideUrl() {
   try {
     const params = new URLSearchParams(window.location.search);
@@ -226,6 +231,7 @@ export function clearBrowserClientData() {
 
 function createInitialState({ withStoredSession = true } = {}) {
   const storedSession = withStoredSession ? loadStoredSession() : null;
+  const storedLocalDemo = Boolean(storedSession?.isLocalDemo && isLocalPreviewHost());
   const storedReactions = loadStoredReactions();
   const storedEntrySettings = loadStoredEntrySettings();
   const initialShineServer = LOCAL_WS_OVERRIDE_URL || DEFAULT_SHINE_SERVER;
@@ -240,7 +246,8 @@ function createInitialState({ withStoredSession = true } = {}) {
     notificationsTab: 'replies',
     pageLabelCollapsed: false,
     session: {
-      isAuthorized: false,
+      isAuthorized: storedLocalDemo,
+      isLocalDemo: storedLocalDemo,
       login: storedSession?.login || '',
       sessionId: storedSession?.sessionId || '',
       storagePwdInMemory: '',
@@ -767,13 +774,17 @@ export function authorizeSession({
   login = state.session.login,
   sessionId = state.session.sessionId,
   storagePwd = state.session.storagePwdInMemory,
+  isLocalDemo = false,
 } = {}) {
+  const localDemo = Boolean(isLocalDemo && isLocalPreviewHost());
   state.session.isAuthorized = true;
+  state.session.isLocalDemo = localDemo;
   state.session.login = login;
   state.session.sessionId = sessionId;
   state.session.storagePwdInMemory = storagePwd;
   persistSession({
     isAuthorized: true,
+    isLocalDemo: localDemo,
     login,
     sessionId,
   });
@@ -783,6 +794,21 @@ export function authorizeSession({
   }
 }
 
+export function isLocalDemoAvailable() {
+  return isLocalPreviewHost();
+}
+
+export function authorizeLocalDemoSession() {
+  if (!isLocalPreviewHost()) return false;
+  authorizeSession({
+    login: 'local-tester',
+    sessionId: 'local-ui-demo',
+    storagePwd: '',
+    isLocalDemo: true,
+  });
+  return true;
+}
+
 export function setSessionResetHandler(handler) {
   onSessionReset = typeof handler === 'function' ? handler : null;
 }
@@ -828,7 +854,7 @@ function resetStateForSignedOut() {
 
 async function tryCloseCurrentSessionOnServer() {
   const currentSessionId = String(state.session.sessionId || '').trim();
-  if (!state.session.isAuthorized || !currentSessionId) return;
+  if (!state.session.isAuthorized || state.session.isLocalDemo || !currentSessionId) return;
 
   try {
     await authService.closeSession(currentSessionId);

shine-UI/styles/components.css

@@ -407,22 +407,83 @@
   text-align: center;
 }
 
+.auth-screen--welcome {
+  position: relative;
+  isolation: isolate;
+  align-content: center;
+  justify-items: center;
+  gap: clamp(12px, 2.4vh, 20px);
+  padding-block: 8px;
+  font-family: "Manrope", "Inter", "SF Pro Display", system-ui, sans-serif;
+}
+
+.screen-content.no-app-chrome:has(> .auth-screen--welcome) {
+  overflow: hidden;
+  overscroll-behavior: none;
+}
+
+.auth-screen--welcome::before {
+  content: "";
+  position: absolute;
+  inset: -14px -14px calc(-24px - env(safe-area-inset-bottom));
+  z-index: -2;
+  background:
+    radial-gradient(circle at 50% 18%, rgba(224, 172, 75, 0.08), transparent 26%),
+    radial-gradient(circle at 50% 67%, rgba(45, 81, 143, 0.06), transparent 38%),
+    linear-gradient(180deg, #040816 0%, #020611 54%, #01040c 100%);
+}
+
+.auth-screen--welcome::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.015) 50%, transparent);
+  opacity: 0.7;
+}
+
 .auth-screen--lower {
   align-content: start;
   padding-top: clamp(80px, 18vh, 180px);
 }
 
 .auth-logo {
-  width: 126px;
-  height: 126px;
-  border-radius: 28px;
-  object-fit: cover;
-  box-shadow: var(--shadow);
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  filter:
+    drop-shadow(0 0 8px rgba(255, 211, 121, 0.72))
+    drop-shadow(0 8px 22px rgba(225, 158, 48, 0.38));
+  animation: shine-logo-breathe 4.8s ease-in-out infinite;
+}
+
+.auth-logo-wrap {
+  position: relative;
+  width: clamp(232px, 59vw, 284px);
+  aspect-ratio: 1;
+}
+
+.auth-logo-wrap::before {
+  content: "";
+  position: absolute;
+  inset: 16%;
+  z-index: -1;
+  border-radius: 50%;
+  background: rgba(214, 155, 56, 0.2);
+  filter: blur(30px);
+  animation: shine-halo-breathe 4.8s ease-in-out infinite;
 }
 
 .auth-brand {
-  font-size: 32px;
-  letter-spacing: 0.04em;
+  margin: -4px 0 clamp(4px, 1vh, 10px);
+  color: #f4ebdd;
+  font-size: clamp(42px, 9vw, 56px);
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: 0;
+  text-shadow: 0 3px 22px rgba(210, 168, 90, 0.2);
 }
 
 .auth-actions,
@@ -435,10 +496,517 @@
   width: min(100%, 320px);
 }
 
+.shine-actions {
+  width: min(100%, 390px);
+  max-width: calc(100% - 48px);
+  gap: 12px;
+}
+
+.shine-btn {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  width: 100%;
+  height: 56px;
+  min-height: 48px;
+  padding: 0 24px;
+  border: 1px solid rgba(183, 203, 235, 0.28);
+  border-radius: 18px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.09), transparent 28%),
+    linear-gradient(180deg, rgba(13, 27, 57, 0.68), rgba(5, 11, 27, 0.74));
+  color: #f4ebdd;
+  font-family: "Manrope", "Inter", "SF Pro Display", system-ui, sans-serif;
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 1.2;
+  letter-spacing: 0;
+  text-align: center;
+  text-shadow: 0 1px 12px rgba(238, 213, 166, 0.1);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.14),
+    inset 0 -18px 30px rgba(0, 0, 0, 0.22),
+    0 14px 30px rgba(0, 0, 0, 0.38),
+    0 2px 7px rgba(29, 57, 103, 0.2);
+  backdrop-filter: blur(18px) saturate(125%);
+  -webkit-backdrop-filter: blur(18px) saturate(125%);
+  cursor: pointer;
+  transition:
+    transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
+    border-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
+    box-shadow 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
+    filter 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.shine-btn::before {
+  content: "";
+  position: absolute;
+  inset: 1px;
+  z-index: -1;
+  border-radius: 16px;
+  background:
+    radial-gradient(120% 65% at 50% 115%, rgba(63, 103, 169, 0.24), transparent 64%),
+    linear-gradient(105deg, rgba(255, 255, 255, 0.05), transparent 38%);
+  pointer-events: none;
+}
+
+.shine-btn::after {
+  content: "";
+  position: absolute;
+  right: 18px;
+  bottom: 0;
+  width: 52px;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(235, 197, 117, 0.72));
+  box-shadow: 0 0 10px rgba(216, 173, 98, 0.3);
+  pointer-events: none;
+}
+
+.shine-btn--primary {
+  border-color: rgba(255, 226, 163, 0.54);
+  background:
+    linear-gradient(180deg, rgba(255, 240, 200, 0.16), transparent 30%),
+    linear-gradient(180deg, rgba(155, 116, 61, 0.62), rgba(49, 35, 28, 0.7));
+  color: #fff3d8;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 246, 216, 0.4),
+    inset 0 -20px 34px rgba(31, 20, 15, 0.34),
+    0 15px 34px rgba(0, 0, 0, 0.42),
+    0 4px 20px rgba(216, 173, 98, 0.16);
+}
+
+.shine-btn--primary::before {
+  background:
+    radial-gradient(115% 65% at 50% 110%, rgba(244, 190, 87, 0.3), transparent 64%),
+    linear-gradient(108deg, rgba(255, 255, 255, 0.12), transparent 38%);
+}
+
+.shine-btn--register {
+  border-color: rgba(197, 215, 243, 0.34);
+}
+
+.shine-btn--view {
+  color: rgba(244, 235, 221, 0.92);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 28%),
+    linear-gradient(180deg, rgba(10, 22, 47, 0.62), rgba(4, 10, 24, 0.76));
+}
+
+.shine-btn--view::after {
+  opacity: 0.58;
+}
+
+.shine-btn--settings {
+  color: rgba(244, 235, 221, 0.88);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 28%),
+    linear-gradient(180deg, rgba(9, 19, 40, 0.58), rgba(4, 9, 22, 0.76));
+}
+
+.shine-btn--settings::after {
+  opacity: 0.38;
+}
+
+.shine-btn:hover {
+  transform: translateY(-1px);
+  border-color: rgba(213, 225, 247, 0.42);
+  filter: brightness(1.06);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.18),
+    inset 0 -18px 30px rgba(0, 0, 0, 0.2),
+    0 17px 34px rgba(0, 0, 0, 0.42),
+    0 3px 12px rgba(40, 78, 137, 0.24);
+}
+
+.shine-btn:active {
+  transform: translateY(1px) scale(0.99);
+  box-shadow:
+    inset 0 2px 10px rgba(0, 0, 0, 0.28),
+    0 8px 18px rgba(0, 0, 0, 0.34);
+}
+
+.shine-btn:focus-visible,
+.shine-local-demo-btn:focus-visible {
+  outline: 2px solid rgba(235, 197, 117, 0.72);
+  outline-offset: 3px;
+}
+
+.shine-btn:disabled {
+  opacity: 0.45;
+  filter: none;
+  transform: none;
+  cursor: not-allowed;
+}
+
+.shine-local-demo-btn {
+  min-height: 32px;
+  padding: 5px 12px;
+  border: 0;
+  background: transparent;
+  color: rgba(162, 180, 215, 0.68);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.shine-local-demo-btn:hover {
+  color: rgba(216, 226, 247, 0.9);
+}
+
+@keyframes shine-logo-breathe {
+  0%, 100% {
+    filter:
+      drop-shadow(0 0 8px rgba(255, 211, 121, 0.62))
+      drop-shadow(0 8px 22px rgba(225, 158, 48, 0.34));
+  }
+  50% {
+    filter:
+      drop-shadow(0 0 14px rgba(255, 220, 147, 0.88))
+      drop-shadow(0 10px 28px rgba(225, 158, 48, 0.5));
+  }
+}
+
+@keyframes shine-halo-breathe {
+  0%, 100% { opacity: 0.66; transform: scale(0.96); }
+  50% { opacity: 1; transform: scale(1.05); }
+}
+
+@media (min-width: 768px) {
+  .shine-btn {
+    height: 60px;
+    font-size: 20px;
+  }
+}
+
+@media (max-height: 760px) {
+  .auth-screen--welcome {
+    gap: 10px;
+  }
+
+  .auth-logo-wrap {
+    width: 206px;
+  }
+
+  .auth-brand {
+    font-size: 40px;
+    margin-bottom: 2px;
+  }
+
+  .shine-actions {
+    gap: 10px;
+  }
+
+  .shine-btn {
+    height: 52px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .auth-logo,
+  .auth-logo-wrap::before,
+  .shine-btn {
+    animation: none;
+    transition: none;
+  }
+}
+
 .login-actions-wide {
   width: 100%;
 }
 
+/* Shared visual language for every screen before a user enters the app. */
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) {
+  --preauth-ivory: #f4ebdd;
+  --preauth-muted: #b7c4de;
+  --preauth-line: rgba(182, 201, 235, 0.24);
+  --preauth-card: rgba(9, 18, 37, 0.78);
+  padding: 18px 16px calc(28px + env(safe-area-inset-bottom));
+  overflow-x: hidden;
+  background:
+    radial-gradient(circle at 50% 18%, rgba(224, 172, 75, 0.08), transparent 26%),
+    radial-gradient(circle at 50% 67%, rgba(45, 81, 143, 0.06), transparent 38%),
+    linear-gradient(180deg, #040816 0%, #020611 54%, #01040c 100%);
+  color: var(--preauth-ivory);
+  font-family: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  overscroll-behavior: contain;
+}
+
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) > section.stack {
+  width: min(100%, 420px);
+  margin-inline: auto;
+}
+
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .page-header {
+  display: grid;
+  grid-template-columns: 42px minmax(0, 1fr) 42px;
+  align-items: center;
+  min-height: 42px;
+  margin-bottom: 18px;
+  gap: 8px;
+}
+
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .page-title {
+  min-width: 0;
+  margin: 0;
+  color: var(--preauth-ivory);
+  font-size: 20px;
+  font-weight: 650;
+  letter-spacing: 0;
+  line-height: 1.2;
+  text-align: center;
+}
+
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .header-left,
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .header-actions {
+  min-width: 0;
+}
+
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .header-actions {
+  justify-content: flex-end;
+}
+
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .header-left .icon-btn,
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .header-actions .icon-btn {
+  display: grid;
+  place-items: center;
+  width: 40px;
+  min-width: 40px;
+  height: 40px;
+  min-height: 40px;
+  padding: 0;
+  border-radius: 12px;
+  border-color: var(--preauth-line);
+  background: rgba(12, 23, 46, 0.72);
+  color: var(--preauth-ivory);
+  font-size: 22px;
+  line-height: 1;
+  text-align: center;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
+}
+
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .login-choice-screen {
+  align-content: start;
+  padding-top: 0;
+}
+
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .login-choice-screen .page-header {
+  margin-bottom: clamp(72px, 14vh, 132px);
+}
+
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .login-choice-screen .page-title {
+  display: none;
+}
+
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .login-choice-screen .header-left .icon-btn {
+  justify-self: start;
+}
+
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .card,
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .login-panel {
+  border: 1px solid var(--preauth-line);
+  border-radius: 16px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 24%),
+    var(--preauth-card);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.075),
+    0 16px 34px rgba(0, 0, 0, 0.24);
+  backdrop-filter: blur(16px) saturate(120%);
+  -webkit-backdrop-filter: blur(16px) saturate(120%);
+}
+
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .card {
+  padding: 18px;
+}
+
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .card .card {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .login-panel {
+  width: min(100%, 420px);
+  padding: 20px;
+  gap: 16px;
+}
+
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .login-panel-title,
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .registration-faq-title,
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .modal-title {
+  color: var(--preauth-ivory);
+  letter-spacing: 0;
+}
+
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .login-panel-title {
+  font-size: 24px;
+  font-weight: 650;
+}
+
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .field-label,
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .auth-copy,
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .status-line,
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .registration-word-number {
+  color: var(--preauth-muted);
+}
+
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .input,
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .select {
+  min-height: 48px;
+  border-color: rgba(182, 201, 235, 0.22);
+  border-radius: 12px;
+  background: rgba(4, 11, 25, 0.64);
+  color: var(--preauth-ivory);
+}
+
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .input:focus,
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .select:focus {
+  border-color: rgba(222, 184, 99, 0.76);
+  box-shadow: 0 0 0 3px rgba(222, 184, 99, 0.13);
+}
+
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .auth-footer-actions {
+  grid-template-columns: minmax(0, 1fr);
+  width: min(100%, 420px);
+  margin-inline: auto;
+  gap: 10px;
+}
+
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .primary-btn,
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .secondary-btn,
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .ghost-btn,
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .link-card {
+  min-height: 50px;
+  border-radius: 14px;
+  color: var(--preauth-ivory);
+  font-family: inherit;
+  font-weight: 600;
+  letter-spacing: 0;
+}
+
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .primary-btn {
+  border-color: rgba(255, 226, 163, 0.5);
+  background:
+    linear-gradient(180deg, rgba(255, 239, 198, 0.16), transparent 31%),
+    linear-gradient(180deg, rgba(144, 105, 55, 0.66), rgba(47, 34, 27, 0.76));
+  box-shadow: inset 0 1px 0 rgba(255, 246, 216, 0.26), 0 10px 24px rgba(0, 0, 0, 0.28);
+}
+
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .secondary-btn,
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .ghost-btn,
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .link-card {
+  border-color: var(--preauth-line);
+  background: linear-gradient(180deg, rgba(24, 43, 79, 0.84), rgba(8, 17, 35, 0.86));
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 18px rgba(0, 0, 0, 0.18);
+}
+
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .primary-btn:hover,
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .secondary-btn:hover,
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .ghost-btn:hover,
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .link-card:hover {
+  border-color: rgba(231, 202, 137, 0.66);
+}
+
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .preauth-local-demo-btn {
+  min-height: 44px;
+  border-style: dashed;
+  color: #c8d7f2;
+}
+
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .registration-toggle,
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .session-item {
+  border-color: var(--preauth-line);
+  background: rgba(9, 19, 38, 0.58);
+  color: var(--preauth-ivory);
+}
+
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .registration-progress {
+  border-color: rgba(226, 193, 124, 0.38);
+  background: rgba(3, 9, 21, 0.62);
+}
+
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .registration-progress-bar {
+  background: linear-gradient(90deg, #b27c38, #f1cd80);
+}
+
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .camera-shell {
+  min-height: min(48dvh, 360px);
+  border-radius: 16px;
+  border-color: var(--preauth-line);
+  background: #050b18;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
+}
+
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .camera-video {
+  min-height: min(48dvh, 360px);
+}
+
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .registration-screen {
+  gap: 12px;
+}
+
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .registration-form {
+  gap: 14px;
+  padding: 16px;
+}
+
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .registration-form .field-label {
+  font-size: 14px;
+}
+
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .registration-password-single {
+  gap: 6px;
+}
+
+.password-length-hint {
+  margin: 0;
+  color: rgba(183, 196, 222, 0.76);
+  font-size: 12px;
+  line-height: 1.3;
+}
+
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .registration-toggle {
+  min-height: 48px;
+  padding: 10px 12px;
+  border-radius: 12px;
+  font-size: 15px;
+}
+
+.registration-login-status {
+  margin: 0;
+  font-size: 13px;
+}
+
+.registration-faq-link {
+  justify-self: center;
+  min-height: 30px;
+  padding: 4px 8px;
+  border: 0;
+  background: transparent;
+  color: rgba(204, 218, 245, 0.72);
+  font: inherit;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.registration-faq-link:hover,
+.registration-faq-link:focus-visible {
+  color: #f0d69b;
+}
+
+@media (max-width: 360px) {
+  .screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) {
+    padding-inline: 12px;
+  }
+
+  .screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .card,
+  .screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .login-panel {
+    padding: 16px;
+  }
+}
+
 .login-panel {
   width: min(100%, 360px);
   gap: 14px;
@@ -1439,6 +2007,10 @@ textarea.input {
   min-height: calc(100dvh - 74px);
 }
 
+.screen-content.network-scroll-lock .network-screen {
+  margin: 0 0 -24px;
+}
+
 .network-stage {
   position: relative;
   height: calc(100dvh - 74px);
@@ -1454,22 +2026,25 @@ textarea.input {
 }
 
 .network-header-overlay {
-  position: sticky;
+  position: absolute;
   top: max(8px, env(safe-area-inset-top));
   left: max(8px, env(safe-area-inset-left));
   right: max(8px, env(safe-area-inset-right));
+  box-sizing: border-box;
   margin-bottom: 0;
   z-index: 12;
   pointer-events: none;
 }
 
 .network-header-overlay.page-header {
+  width: auto;
   margin-bottom: 0;
   gap: 6px;
 }
 
 .network-header-overlay .header-left,
 .network-header-overlay .header-actions {
+  flex: 0 0 auto;
   min-width: 0;
   gap: 6px;
 }
@@ -1483,6 +2058,7 @@ textarea.input {
 }
 
 .network-header-overlay .page-title {
+  flex: 1 1 auto;
   font-size: 16px;
   min-width: 0;
   white-space: nowrap;
@@ -2882,6 +3458,43 @@ textarea.input {
   justify-content: center;
 }
 
+.channels-top-search-btn {
+  border-color: rgba(105, 211, 255, 0.58);
+  background: linear-gradient(150deg, rgba(26, 81, 118, 0.78), rgba(12, 30, 55, 0.96));
+  box-shadow: inset 0 0 0 1px rgba(177, 239, 255, 0.12), 0 0 13px rgba(77, 194, 255, 0.2);
+}
+
+.channels-top-search-btn:hover,
+.channels-top-search-btn:focus-visible {
+  border-color: rgba(166, 237, 255, 0.9);
+  background: linear-gradient(150deg, rgba(38, 111, 153, 0.88), rgba(14, 39, 68, 0.98));
+  box-shadow: inset 0 0 0 1px rgba(214, 249, 255, 0.2), 0 0 18px rgba(93, 211, 255, 0.38);
+}
+
+.channels-search-icon {
+  position: relative;
+  display: block;
+  width: 13px;
+  height: 13px;
+  border: 1.8px solid #d9f5ff;
+  border-radius: 50%;
+  box-shadow: 0 0 6px rgba(133, 225, 255, 0.58);
+}
+
+.channels-search-icon::after {
+  content: '';
+  position: absolute;
+  width: 6px;
+  height: 1.8px;
+  right: -4px;
+  bottom: -2px;
+  border-radius: 999px;
+  background: #d9f5ff;
+  box-shadow: 0 0 5px rgba(133, 225, 255, 0.58);
+  transform: rotate(45deg);
+  transform-origin: left center;
+}
+
 .channels-top-action-btn {
   min-height: 38px;
   padding: 8px 12px;
@@ -4591,15 +5204,8 @@ html, body { overflow-x: hidden; }
 }
 
 .profile-top-actions {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 5px;
-}
-
-.profile-bottom-actions {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 5px;
+  display: flex;
+  justify-content: flex-end;
 }
 
 .profile-top-action-btn {
@@ -4614,17 +5220,158 @@ html, body { overflow-x: hidden; }
   text-overflow: ellipsis;
 }
 
+.profile-top-menu-btn {
+  width: 32px;
+  min-width: 32px;
+  padding: 0;
+  font-size: 22px;
+  line-height: 1;
+  letter-spacing: 0;
+}
+
+.profile-info-modal {
+  padding: 16px;
+  background: rgba(2, 5, 11, 0.7);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+}
+
+.profile-info-modal__card {
+  width: min(100%, 430px);
+  max-height: calc(100dvh - 32px);
+  overflow: auto;
+  padding: 20px;
+  gap: 18px;
+  border: 1px solid rgba(142, 180, 242, 0.34);
+  border-radius: 16px;
+  background: rgba(13, 23, 42, 0.96);
+  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.52);
+  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", sans-serif;
+}
+
+.profile-info-modal__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.profile-info-modal__eyebrow {
+  margin: 0 0 5px;
+  color: rgba(177, 203, 244, 0.7);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.profile-info-modal__title {
+  color: #f4f7ff;
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 1.18;
+}
+
+.profile-info-modal__close {
+  display: grid;
+  flex: 0 0 32px;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  place-items: center;
+  border: 1px solid rgba(171, 195, 235, 0.25);
+  border-radius: 8px;
+  background: rgba(145, 172, 223, 0.1);
+  color: rgba(244, 247, 255, 0.94);
+  font-size: 25px;
+  font-weight: 300;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.profile-info-modal__close:hover {
+  background: rgba(145, 172, 223, 0.2);
+}
+
+.profile-info-modal__content {
+  display: grid;
+  gap: 18px;
+  color: rgba(229, 237, 255, 0.86);
+  font-size: 16px;
+  line-height: 1.52;
+}
+
+.profile-info-modal__lead {
+  margin: 0;
+}
+
+.profile-info-modal__section {
+  padding-top: 16px;
+  border-top: 1px solid rgba(174, 200, 242, 0.18);
+}
+
+.profile-info-modal__section-title {
+  margin: 0 0 10px;
+  color: rgba(244, 247, 255, 0.95);
+  font-size: 15px;
+  font-weight: 650;
+  line-height: 1.35;
+}
+
+.profile-info-modal__list {
+  display: grid;
+  gap: 8px;
+  margin: 0;
+  padding-left: 22px;
+}
+
+.profile-info-modal__list li {
+  padding-left: 2px;
+}
+
+.profile-info-modal__footer {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.profile-info-modal__confirm {
+  min-width: 112px;
+  font-weight: 650;
+}
+
+@media (max-width: 360px) {
+  .profile-info-modal__card {
+    padding: 16px;
+    gap: 16px;
+  }
+
+  .profile-info-modal__title {
+    font-size: 20px;
+  }
+
+  .profile-info-modal__content {
+    font-size: 15px;
+  }
+}
+
 .profile-links-header-btn {
   white-space: pre-line;
   line-height: 1.1;
 }
 
 .profile-main-card {
+  position: relative;
   margin-top: 0;
-  padding: 2px 8px 8px;
+  padding: 8px;
   gap: 4px;
 }
 
+.profile-main-card .profile-top-actions {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 2;
+}
+
 .profile-status-row {
   align-items: center;
   gap: 6px;
@@ -4861,6 +5608,33 @@ html, body { overflow-x: hidden; }
   margin-top: 6px !important;
 }
 
+/* Compact rows keep the channel sphere as the visual height reference. */
+.channels-screen--list .channels-groups {
+  gap: 0;
+}
+
+.channels-screen--list .channel-row {
+  grid-template-columns: 46px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 10px;
+  min-height: 56px;
+  margin: 2px 20px;
+  padding: 6px 14px;
+  border-radius: 16px;
+  border-color: transparent !important;
+  background: rgba(18, 24, 38, 0.18) !important;
+  box-shadow: none;
+}
+
+.channels-screen--list .channel-row-main {
+  gap: 2px;
+}
+
+.channels-screen--list .channel-row-message {
+  min-height: 0;
+  line-height: 1.25;
+}
+
 .channels-screen--channel .channel-main-action--compose {
   position: sticky;
   bottom: -12px;