UI: новый общий стиль, тёмная/светлая тема, настраиваемая палитра

- styles/main.css: роли цветов (по умолчанию «Индиго»), шкала отступов/скруглений/шрифтов,
  цвета отношений для обеих тем; жёсткие цвета в стилях заменены на роли.
- Палитра: пресеты и личные правки, «Оформление» Авто/День/Ночь, долгое нажатие —
  редактор цветов с экспортом/импортом.
- Каналы: пузыри постов автора, плашки дней, строка «Написать в канал…», «О канале»,
  создание канала с адресом из названия; лента открывается на свежих постах.
- Чаты: плоский список, чипы-фильтры, пузыри, плашки дней; нижняя панель скрыта в переписке.
- Корневые разделы — единая шапка; профиль и чужой профиль — общая карточка;
  настройки, кошелёк, сеансы — меню-списки.
- Нижняя панель: иконки без подписей, бейджи на иконках.
- confirmDialog вместо window.confirm/alert; на телефоне диалоги — шторки снизу.
- docs/UI-Design/ISSUES-for-dev.md — найденные ошибки сервера/UI.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

shine-UI/js/pages/add-channel-view.js

@@ -17,7 +17,7 @@ export const pageMeta = { id: 'add-channel-view', title: 'Создание ка
 
 const CREATE_CHANNEL_FLASH_KEY = 'shine-channels-create-success';
 const CHANNEL_TYPE_PUBLIC = 1;
-const CHANNEL_LOGIN_HINT = 'Разрешены латинские буквы, цифры, _ и -. Длина: от 3 до 32 символов. Название не должно состоять только из цифр.';
+const CHANNEL_LOGIN_HINT = 'Латиница, цифры, _ и -, от 3 до 32 символов, не только цифры.';
 const CHANNEL_LOGIN_DIGITS_ONLY_HINT = 'Имя канала не должно состоять только из цифр.';
 
 function persistCreateSuccessFlash(message) {
@@ -78,6 +78,17 @@ function shortAvatarBlockchainAddress(value) {
   return raw.slice(-24);
 }
 
+const TRANSLIT = {
+  а: 'a', б: 'b', в: 'v', г: 'g', д: 'd', е: 'e', ё: 'e', ж: 'zh', з: 'z', и: 'i', й: 'y', к: 'k', л: 'l', м: 'm',
+  н: 'n', о: 'o', п: 'p', р: 'r', с: 's', т: 't', у: 'u', ф: 'f', х: 'h', ц: 'ts', ч: 'ch', ш: 'sh', щ: 'sch',
+  ъ: '', ы: 'y', ь: '', э: 'e', ю: 'yu', я: 'ya',
+};
+
+function suggestChannelLogin(title) {
+  const latin = Array.from(String(title || '').toLowerCase()).map((ch) => TRANSLIT[ch] ?? ch).join('');
+  return latin.replace(/[^a-z0-9_-]+/g, '-').replace(/-{2,}/g, '-').replace(/^[-_]+|[-_]+$/g, '').slice(0, 32);
+}
+
 export function render({navigate, chrome}) {
   const screen = document.createElement('section');
   screen.className = 'stack channels-screen channels-screen--add';
@@ -101,21 +112,31 @@ export function render({navigate, chrome}) {
       </div>
     </div>
 
-    <label for="channel-name">Технический логин канала</label>
-    <input id="channel-name" class="input" maxlength="32" placeholder="Например: My-Channel_1" required />
-    <div class="meta-muted channel-create-login-hint">${CHANNEL_LOGIN_HINT}</div>
-    <div class="meta-muted channel-link-preview" id="channel-link-preview">&nbsp;</div>
-    <div id="channel-name-error" class="meta-muted inline-error"></div>
+    <div class="form-field">
+      <label for="channel-title">Название канала</label>
+      <input id="channel-title" class="input" maxlength="50" placeholder="Например: Мой канал" autocomplete="off" />
+      <div class="form-field__meta">
+        <div id="channel-title-error" class="inline-error"></div>
+        <div class="form-field__counter" id="channel-title-counter">0 / 50</div>
+      </div>
+    </div>
 
-    <label for="channel-title">Как канал будет виден пользователям</label>
-    <input id="channel-title" class="input" maxlength="50" placeholder="Например: Мой красивый канал" />
-    <div class="meta-muted" id="channel-title-counter">0 / 50 символов</div>
-    <div id="channel-title-error" class="meta-muted inline-error"></div>
+    <div class="form-field">
+      <label for="channel-name">Адрес канала</label>
+      <input id="channel-name" class="input" maxlength="32" placeholder="my-channel" required autocomplete="off" autocapitalize="off" spellcheck="false" />
+      <div class="form-field__hint channel-create-login-hint">${CHANNEL_LOGIN_HINT} Заполняется из названия, можно поправить.</div>
+      <div class="form-field__hint channel-link-preview" id="channel-link-preview" hidden></div>
+      <div id="channel-name-error" class="inline-error"></div>
+    </div>
 
-    <label for="channel-description">Описание канала (необязательно)</label>
-    <textarea id="channel-description" class="input" rows="4" maxlength="250" placeholder="Коротко о канале, до 250 символов"></textarea>
-    <div class="meta-muted" id="channel-description-counter">0 / 250 символов</div>
-    <div id="channel-description-error" class="meta-muted inline-error"></div>
+    <div class="form-field">
+      <label for="channel-description">Описание <span class="form-field__optional">необязательно</span></label>
+      <textarea id="channel-description" class="input" rows="3" maxlength="250" placeholder="Коротко о канале"></textarea>
+      <div class="form-field__meta">
+        <div id="channel-description-error" class="inline-error"></div>
+        <div class="form-field__counter" id="channel-description-counter">0 / 250</div>
+      </div>
+    </div>
 
     <div id="channel-create-error" class="meta-muted inline-error"></div>
     <div class="form-actions-grid">
@@ -166,9 +187,11 @@ export function render({navigate, chrome}) {
   const renderChannelLinkPreview = (nameValue) => {
     const normalizedChannelName = normalizeChannelDisplayName(nameValue);
     if (!ownerBlockchainName || !normalizedChannelName) {
-      linkPreviewEl.innerHTML = '&nbsp;';
+      linkPreviewEl.hidden = true;
+      linkPreviewEl.textContent = '';
       return;
     }
+    linkPreviewEl.hidden = false;
     const directUrl = buildAbsoluteChannelUrl({
       ownerBlockchainName,
       channelName: normalizedChannelName,
@@ -216,8 +239,8 @@ export function render({navigate, chrome}) {
     titleErrorEl.textContent = titleCheck.error;
     descriptionErrorEl.textContent = descriptionCheck.error;
 
-    titleCounterEl.textContent = `${Number(titleCheck.length || 0)} / 50 символов`;
-    descriptionCounterEl.textContent = `${Number(descriptionCheck.length || 0)} / 250 символов`;
+    titleCounterEl.textContent = `${Number(titleCheck.length || 0)} / 50`;
+    descriptionCounterEl.textContent = `${Number(descriptionCheck.length || 0)} / 250`;
 
     const ok = nameCheck.ok && titleCheck.ok && descriptionCheck.ok;
     submitEl.disabled = submitInFlight || !ok;
@@ -232,16 +255,19 @@ export function render({navigate, chrome}) {
     };
   };
 
+  let nameEditedByHand = false;
   nameEl.addEventListener('input', () => {
+    nameEditedByHand = nameEl.value.trim() !== '';
     const raw = String(nameEl.value || '');
     const sanitized = sanitizeChannelLoginInput(raw);
-    if (raw !== sanitized) {
-      nameEl.value = sanitized;
-      window.alert(CHANNEL_LOGIN_HINT);
-    }
+    if (raw !== sanitized) nameEl.value = sanitized;
+    updateValidation();
+    if (raw !== sanitized) nameErrorEl.textContent = 'Недопустимые символы убраны: можно латиницу, цифры, _ и -.';
+  });
+  titleEl.addEventListener('input', () => {
+    if (!nameEditedByHand) nameEl.value = suggestChannelLogin(titleEl.value);
     updateValidation();
   });
-  titleEl.addEventListener('input', updateValidation);
   descriptionEl.addEventListener('input', updateValidation);
   avatarBtn.addEventListener('click', async () => {
     try {
@@ -285,7 +311,7 @@ export function render({navigate, chrome}) {
 
     const check = updateValidation();
     if (check.name && /^[0-9]+$/.test(check.name)) {
-      window.alert(CHANNEL_LOGIN_DIGITS_ONLY_HINT);
+      nameErrorEl.textContent = CHANNEL_LOGIN_DIGITS_ONLY_HINT;
       nameEl.focus();
       return;
     }