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/features/preauth.css

@@ -21,10 +21,10 @@
   padding: 24px;
   overflow: 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%);
-  font-family: "Manrope", "Inter", "SF Pro Display", system-ui, sans-serif;
+    radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--warning) 8%, transparent), transparent 26%),
+    radial-gradient(circle at 50% 67%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 38%),
+    var(--background);
+  font-family: var(--font-main);
   opacity: 1;
   visibility: visible;
   transition: opacity 520ms ease, visibility 520ms ease;
@@ -52,7 +52,7 @@
   inset: 16%;
   z-index: -1;
   border-radius: 50%;
-  background: rgba(214, 155, 56, 0.2);
+  background: color-mix(in srgb, var(--warning) 20%, transparent);
   filter: blur(30px);
   animation: shine-halo-breathe 4.8s ease-in-out infinite;
 }
@@ -64,19 +64,19 @@
   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));
+    drop-shadow(0 0 8px color-mix(in srgb, var(--warning) 72%, transparent))
+    drop-shadow(0 8px 22px color-mix(in srgb, var(--warning) 38%, transparent));
   animation: shine-logo-breathe 4.8s ease-in-out infinite;
 }
 
 
 .initial-splash__brand {
   margin-top: -2px;
-  color: #f4ebdd;
+  color: var(--text-primary);
   font-size: clamp(34px, 7vw, 46px);
   font-weight: 500;
   line-height: 1;
-  text-shadow: 0 3px 22px rgba(210, 168, 90, 0.2);
+  text-shadow: 0 3px 22px color-mix(in srgb, var(--warning) 20%, transparent);
 }
 
 
@@ -87,7 +87,7 @@
   justify-items: center;
   gap: clamp(12px, 2.4vh, 20px);
   padding-block: 8px;
-  font-family: "Manrope", "Inter", "SF Pro Display", system-ui, sans-serif;
+  font-family: var(--font-main);
 }
 
 
@@ -103,9 +103,9 @@
   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%);
+    radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--warning) 8%, transparent), transparent 26%),
+    radial-gradient(circle at 50% 67%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 38%),
+    var(--background);
 }
 
 
@@ -115,7 +115,7 @@
   inset: 0;
   z-index: -1;
   pointer-events: none;
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.015) 50%, transparent);
+  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text-primary) 2%, transparent) 50%, transparent);
   opacity: 0.7;
 }
 
@@ -132,8 +132,8 @@
   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));
+    drop-shadow(0 0 8px color-mix(in srgb, var(--warning) 72%, transparent))
+    drop-shadow(0 8px 22px color-mix(in srgb, var(--warning) 38%, transparent));
   animation: shine-logo-breathe 4.8s ease-in-out infinite;
 }
 
@@ -151,7 +151,7 @@
   inset: 16%;
   z-index: -1;
   border-radius: 50%;
-  background: rgba(214, 155, 56, 0.2);
+  background: color-mix(in srgb, var(--warning) 20%, transparent);
   filter: blur(30px);
   animation: shine-halo-breathe 4.8s ease-in-out infinite;
 }
@@ -159,12 +159,12 @@
 
 .auth-brand {
   margin: -4px 0 clamp(4px, 1vh, 10px);
-  color: #f4ebdd;
+  color: var(--text-primary);
   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);
+  text-shadow: 0 3px 22px color-mix(in srgb, var(--warning) 20%, transparent);
 }
 
 
@@ -196,7 +196,7 @@
   min-height: 48px;
   padding: 0 24px;
   border-radius: 18px;
-  font-family: "Manrope", "Inter", "SF Pro Display", system-ui, sans-serif;
+  font-family: var(--font-main);
   font-size: 18px;
   font-weight: 500;
   line-height: 1.2;
@@ -219,27 +219,27 @@
   padding: 5px 12px;
   border: 0;
   background: transparent;
-  color: rgba(162, 180, 215, 0.68);
+  color: var(--accent);
   font-size: 12px;
   cursor: pointer;
 }
 
 
 .shine-local-demo-btn:hover {
-  color: rgba(216, 226, 247, 0.9);
+  color: var(--text-primary);
 }
 
 
 @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));
+      drop-shadow(0 0 8px color-mix(in srgb, var(--warning) 62%, transparent))
+      drop-shadow(0 8px 22px color-mix(in srgb, var(--warning) 34%, transparent));
   }
   50% {
     filter:
-      drop-shadow(0 0 14px rgba(255, 220, 147, 0.88))
-      drop-shadow(0 10px 28px rgba(225, 158, 48, 0.5));
+      drop-shadow(0 0 14px color-mix(in srgb, var(--warning) 88%, transparent))
+      drop-shadow(0 10px 28px color-mix(in srgb, var(--warning) 50%, transparent));
   }
 }
 
@@ -306,18 +306,18 @@
 
 /* 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));
+  --preauth-ivory: var(--text-primary);
+  --preauth-muted: var(--text-secondary);
+  --preauth-line: var(--border-subtle);
+  --preauth-card: var(--surface);
+  padding: env(safe-area-inset-top) 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%);
+    radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--warning) 8%, transparent), transparent 26%),
+    radial-gradient(circle at 50% 67%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 38%),
+    var(--background);
   color: var(--preauth-ivory);
-  font-family: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-family: var(--font-main);
   overscroll-behavior: contain;
 }
 
@@ -372,12 +372,12 @@
   padding: 0;
   border-radius: 12px;
   border-color: var(--preauth-line);
-  background: rgba(12, 23, 46, 0.72);
+  background: var(--surface);
   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);
+  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 8%, transparent);
 }
 
 
@@ -408,10 +408,10 @@
   border: 1px solid var(--preauth-line);
   border-radius: 16px;
   background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 24%),
+    linear-gradient(180deg, color-mix(in srgb, var(--text-primary) 6%, transparent), transparent 24%),
     var(--preauth-card);
   box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.075),
+    inset 0 1px 0 color-mix(in srgb, var(--text-primary) 8%, transparent),
     0 16px 34px rgba(0, 0, 0, 0.24);
   backdrop-filter: blur(16px) saturate(120%);
   -webkit-backdrop-filter: blur(16px) saturate(120%);
@@ -465,9 +465,9 @@
 .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-color: color-mix(in srgb, var(--accent) 22%, transparent);
   border-radius: 12px;
-  background: rgba(4, 11, 25, 0.64);
+  background: var(--surface);
   color: var(--preauth-ivory);
 }
 
@@ -506,8 +506,8 @@
 
 .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);
+  background: linear-gradient(180deg, var(--surface), var(--surface));
+  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 8%, transparent), 0 8px 18px rgba(0, 0, 0, 0.18);
 }
 
 
@@ -524,19 +524,19 @@
 .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);
+  background: var(--surface);
   color: var(--preauth-ivory);
 }
 
 
 .screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .registration-progress {
   border-color: transparent;
-  background: rgba(3, 9, 21, 0.62);
+  background: var(--surface);
 }
 
 
 .screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .registration-progress-bar {
-  background: linear-gradient(90deg, #b27c38, #f1cd80);
+  background: linear-gradient(90deg, var(--warning), var(--warning));
 }
 
 
@@ -544,8 +544,8 @@
   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);
+  background: var(--surface);
+  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 6%, transparent);
 }
 
 
@@ -566,7 +566,7 @@
 
 
 .screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .registration-form .field-label {
-  font-size: 14px;
+  font-size: var(--text-sm);
 }
 
 
@@ -577,7 +577,7 @@
 
 .password-length-hint {
   margin: 0;
-  color: rgba(183, 196, 222, 0.76);
+  color: var(--accent);
   font-size: 12px;
   line-height: 1.3;
 }
@@ -646,13 +646,13 @@
 
 .auth-copy {
   line-height: 1.45;
-  color: #d8e3ff;
+  color: var(--text-primary);
 }
 
 
 .auth-status-card {
   width: min(100%, 320px);
-  color: #d8e3ff;
+  color: var(--text-primary);
 }
 
 
@@ -681,7 +681,7 @@
 
 
 .registration-finish-tx-link {
-  color: #9fd8ff;
+  color: var(--accent);
   text-decoration: underline;
   overflow-wrap: anywhere;
   word-break: break-all;
@@ -690,7 +690,7 @@
 
 .registration-finish-tx-link:hover,
 .registration-finish-tx-link:focus-visible {
-  color: #c9ebff;
+  color: var(--text-primary);
 }
 
 
@@ -700,9 +700,9 @@
   gap: 10px;
   padding: 12px 14px;
   border-radius: 14px;
-  border: 1px solid rgba(132, 162, 228, 0.22);
-  background: rgba(20, 31, 52, 0.72);
-  color: #eef3ff;
+  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
+  background: var(--surface);
+  color: var(--text-primary);
   line-height: 1.4;
 }
 
@@ -710,7 +710,7 @@
 .registration-toggle input {
   width: 18px;
   height: 18px;
-  accent-color: #d4af37;
+  accent-color: var(--warning);
 }
 
 
@@ -742,7 +742,7 @@
 
 .registration-word-number {
   font-size: 12px;
-  color: #b2c2e6;
+  color: var(--accent);
   min-width: 18px;
   text-align: right;
 }
@@ -803,7 +803,7 @@
   margin: 0;
   font-size: 22px;
   line-height: 1.2;
-  color: #f6deb0;
+  color: var(--text-primary);
 }
 
 
@@ -819,7 +819,7 @@
 .registration-progress {
   width: 100%;
   height: 10px;
-  border: 1px solid rgba(180, 180, 180, 0.5);
+  border: 1px solid var(--border-control);
   border-radius: 6px;
   overflow: hidden;
 }
@@ -828,7 +828,7 @@
 .registration-progress-bar {
   height: 100%;
   width: 0%;
-  background: rgba(80, 160, 255, 0.9);
+  background: color-mix(in srgb, var(--accent) 90%, transparent);
   transition: width 180ms linear;
 }
 
@@ -838,9 +838,9 @@
 .login-remote-server {
   width: 100%;
   padding: 14px;
-  border: 1px solid rgba(182, 201, 235, 0.18);
+  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
   border-radius: 14px;
-  background: rgba(4, 11, 25, 0.44);
+  background: var(--surface);
 }
 
 
@@ -865,7 +865,7 @@
   z-index: 12000;
   place-items: center;
   padding: 24px;
-  background: rgba(1, 5, 14, 0.72);
+  background: var(--surface);
   backdrop-filter: blur(14px);
   -webkit-backdrop-filter: blur(14px);
 }
@@ -875,9 +875,9 @@
   width: min(100%, 290px);
   place-items: center;
   padding: 28px 24px;
-  border: 1px solid rgba(205, 220, 246, 0.18);
+  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
   border-radius: 20px;
-  background: rgba(7, 15, 31, 0.9);
+  background: var(--surface);
   box-shadow: 0 22px 54px rgba(0, 0, 0, 0.34);
   text-align: center;
 }
@@ -886,7 +886,7 @@
 .secret-generation-spinner {
   width: 42px;
   height: 42px;
-  border: 3px solid rgba(220, 232, 255, 0.18);
+  border: 3px solid var(--border-subtle);
   border-top-color: transparent;
   border-radius: 50%;
   animation: secret-generation-spin 0.82s linear infinite;
@@ -894,7 +894,7 @@
 
 
 .secret-generation-title {
-  color: var(--preauth-ivory, #f4ebdd);
+  color: var(--preauth-ivory, var(--text-primary));
   font-size: 18px;
   font-weight: 650;
 }
@@ -902,7 +902,7 @@
 
 .secret-generation-progress {
   min-height: 20px;
-  color: var(--preauth-muted, #a8bcdf);
+  color: var(--preauth-muted, var(--accent));
   font-size: 13px;
 }
 
@@ -969,3 +969,63 @@
 .screen-content.preauth-flow .auth-footer-actions .shine-btn {
   width: 100%;
 }
+
+
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .topbar__left .icon-btn,
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .topbar__right .icon-btn {
+  width: 44px;
+  min-width: 44px;
+  height: 44px;
+  min-height: 44px;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+  color: var(--text-primary);
+}
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .topbar__title { color: var(--text-primary); font-size: var(--text-lg); font-weight: var(--weight-bold); }
+.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(--border-subtle);
+  border-radius: var(--radius-lg);
+  background: var(--surface);
+  box-shadow: none;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+.screen-content.preauth-flow .topbar { background: transparent; }
+
+.auth-screen--welcome .shine-actions { gap: var(--space-3); }
+.auth-screen--welcome .start-language-link,
+.auth-screen--welcome .start-settings-link {
+  min-height: var(--control-height);
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+  color: var(--accent);
+  font-size: var(--text-md);
+  font-weight: var(--weight-medium);
+}
+.auth-screen--welcome .start-settings-link { color: var(--text-secondary); font-size: var(--text-sm); }
+.auth-screen--welcome .start-settings-link::after { content: none; }
+
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .login-choice-screen .topbar { margin-bottom: var(--space-4); }
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .login-choice-screen .topbar__title { display: block; }
+
+.screen-content.filled-action-buttons .registration-faq-link {
+  justify-self: center;
+  min-height: 36px;
+  padding: 0 8px;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+  color: var(--accent);
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .topbar { min-height: 56px; margin-bottom: var(--space-2); grid-template-columns: 44px minmax(0, 1fr) 44px; }
+
+.auth-screen--welcome .shine-actions { width: min(100%, 420px); justify-self: center; }
+.auth-screen--welcome .shine-actions > :is(.shine-btn, .secondary-btn) { width: 100%; min-height: 48px; font-size: var(--text-md); font-weight: var(--weight-bold); }