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/styles/components/toolbar.css

@@ -1,13 +1,30 @@
-/* Пять разделов с одинаковыми действиями и доступными подписями. */
-.toolbar { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); min-height: 64px; gap: 0; padding: 4px 0; background: var(--background); }
-.toolbar-btn { position: relative; min-width: 0; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 4px 1px; border: 0; border-radius: 12px; background: transparent; color: var(--text-secondary); font-size: .6875rem; line-height: 1rem; overflow-wrap: anywhere; cursor: pointer; }
-.toolbar-btn > svg { width: 36px; height: 28px; padding: 3px 7px; border-radius: 10px; flex-shrink: 0; }
+.toolbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); min-height: 56px; align-items: center; gap: 0; padding: 4px 0; background: var(--background); }
+.toolbar-btn { position: relative; min-width: 0; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 4px 1px; border: 0; border-radius: 12px; background: transparent; color: var(--text-secondary); cursor: pointer; }
 .toolbar-btn.active { color: var(--accent); }
-.toolbar-btn.active > svg { background: var(--surface-selected); }
-.toolbar-btn:hover, .toolbar-btn:active { background: var(--surface); }
 .toolbar-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
-.toolbar-label-wrap { display: flex; align-items: center; gap: 3px; }
-.toolbar-connection-dot { display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--text-secondary); }
+
+.toolbar-icon { position: relative; display: grid; place-items: center; width: 56px; height: 36px; border-radius: 18px; flex-shrink: 0; transition: background-color var(--duration-fast) ease; }
+.toolbar-icon--mandala { height: 44px; }
+.toolbar-btn.active .toolbar-icon { background: var(--surface-selected); }
+.toolbar-btn:active .toolbar-icon { background: var(--surface-selected); }
+
+.toolbar-svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: filter var(--duration-fast) ease; }
+.toolbar-svg .toolbar-svg-dot { fill: currentColor; stroke: none; }
+.toolbar-btn.active .toolbar-svg { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 55%, transparent)); }
+.toolbar-mandala { display: block; width: 38px; height: 38px; object-fit: contain; transition: transform var(--duration-fast) ease; }
+.toolbar-btn.active .toolbar-mandala { transform: scale(1.06); }
+
+.toolbar-icon .toolbar-connection-indicator { position: absolute; right: 8px; bottom: 0; display: block; }
+.toolbar-connection-dot { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--text-secondary); box-shadow: 0 0 0 2px var(--background); }
 .toolbar-connection-indicator.is-connected .toolbar-connection-dot { background: var(--success); }
 .toolbar-connection-indicator.is-disconnected .toolbar-connection-dot { background: var(--danger); }
-.toolbar-unread-badge { position: absolute; top: 0; right: 6px; min-width: 16px; padding: 0 4px; border-radius: 12px; color: var(--on-accent); background: var(--accent); font-size: .625rem; line-height: 16px; }
+
+.toolbar-unread-badge { position: absolute; top: -5px; right: 2px; min-width: 18px; padding: 0 5px; border-radius: 12px; color: var(--on-accent); background: var(--accent); box-shadow: 0 0 0 2px var(--background); font-size: .6875rem; font-weight: 600; line-height: 18px; text-align: center; }
+
+@media (prefers-reduced-motion: reduce) {
+  .toolbar-icon, .toolbar-svg, .toolbar-mandala { transition: none; }
+  .toolbar-btn.active .toolbar-mandala { transform: none; }
+}
+.toolbar-svg * { vector-effect: non-scaling-stroke; }
+
+:root[data-theme='light'] .toolbar-mandala { filter: saturate(1.4) brightness(0.8); }