Redesign login page with split promo layout

Left panel: logo, headline, feature list, price (200 ₽/мес).
Right panel: login form. Responsive for mobile.
Fix topbar logo display with white bg and shadow.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

static/styles.css

@@ -131,9 +131,12 @@ a:hover { color: var(--blue-dark); text-decoration: underline; }
 .topbar__logo-img {
     width: 34px;
     height: 34px;
-    border-radius: var(--r-sm);
+    border-radius: 8px;
     object-fit: contain;
     flex-shrink: 0;
+    background: white;
+    padding: 3px;
+    box-shadow: 0 2px 8px rgba(203,17,171,0.25);
 }
 
 .topbar__name {
@@ -878,7 +881,7 @@ textarea:focus {
 
 .token-actions button { font-size: 13px; padding: 7px 14px; }
 
-/* ─── Auth ───────────────────────────────────────────────────────── */
+/* ─── Auth legacy shell ──────────────────────────────────────────── */
 .auth-shell {
     min-height: 100vh;
     display: flex;
@@ -887,16 +890,164 @@ textarea:focus {
     padding: 24px;
 }
 
+/* ─── Login split layout ─────────────────────────────────────────── */
+.login-split {
+    display: flex;
+    min-height: 100vh;
+}
+
+.login-promo {
+    flex: 1 1 55%;
+    background: linear-gradient(145deg, #3D0066 0%, #6B0FA8 45%, #CB11AB 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 60px 48px;
+    position: relative;
+    overflow: hidden;
+}
+.login-promo::before {
+    content: '';
+    position: absolute;
+    width: 500px; height: 500px;
+    border-radius: 50%;
+    background: rgba(255,255,255,0.04);
+    top: -120px; right: -120px;
+}
+.login-promo::after {
+    content: '';
+    position: absolute;
+    width: 300px; height: 300px;
+    border-radius: 50%;
+    background: rgba(255,255,255,0.04);
+    bottom: -80px; left: -80px;
+}
+
+.login-promo__inner {
+    position: relative;
+    z-index: 1;
+    max-width: 480px;
+}
+
+.login-promo__logo {
+    width: 96px;
+    height: 96px;
+    object-fit: contain;
+    border-radius: 20px;
+    background: white;
+    padding: 8px;
+    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
+    margin-bottom: 28px;
+    display: block;
+}
+
+.login-promo__title {
+    font-size: 2rem;
+    font-weight: 800;
+    color: white;
+    line-height: 1.25;
+    margin-bottom: 14px;
+}
+
+.login-promo__sub {
+    font-size: 15px;
+    color: rgba(255,255,255,0.78);
+    line-height: 1.65;
+    margin-bottom: 36px;
+}
+
+.login-features {
+    list-style: none;
+    padding: 0;
+    margin: 0 0 36px;
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+}
+
+.login-features__item {
+    display: flex;
+    align-items: flex-start;
+    gap: 14px;
+    color: white;
+}
+
+.login-features__icon {
+    font-size: 20px;
+    line-height: 1;
+    flex-shrink: 0;
+    margin-top: 1px;
+}
+
+.login-features__item strong {
+    display: block;
+    font-size: 14px;
+    font-weight: 700;
+    margin-bottom: 2px;
+    color: white;
+}
+
+.login-features__item span {
+    font-size: 13px;
+    color: rgba(255,255,255,0.7);
+    line-height: 1.5;
+}
+
+.login-price {
+    display: inline-flex;
+    align-items: center;
+    gap: 16px;
+    background: rgba(255,255,255,0.12);
+    border: 1px solid rgba(255,255,255,0.2);
+    border-radius: 14px;
+    padding: 16px 22px;
+    backdrop-filter: blur(8px);
+}
+
+.login-price__amount {
+    font-size: 2rem;
+    font-weight: 900;
+    color: white;
+    white-space: nowrap;
+}
+.login-price__amount span {
+    font-size: 1rem;
+    font-weight: 500;
+    opacity: 0.7;
+}
+
+.login-price__desc {
+    font-size: 13px;
+    color: rgba(255,255,255,0.75);
+    line-height: 1.5;
+    max-width: 200px;
+}
+
+.login-form-wrap {
+    flex: 0 0 420px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 40px 32px;
+    background: var(--bg);
+}
+
+.login-form-title {
+    font-size: 1.3rem;
+    font-weight: 700;
+    margin-bottom: 22px;
+    color: var(--c-text);
+}
+
+/* ─── Auth card ──────────────────────────────────────────────────── */
 .auth-card {
     width: 100%;
     max-width: 440px;
-    background: rgba(255,255,255,0.93);
+    background: rgba(255,255,255,0.97);
     border: 1px solid rgba(229,231,235,0.9);
     border-radius: var(--r-xl);
     padding: 36px;
     box-shadow: var(--shadow-lg);
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
 }
 
 .auth-kicker {
@@ -906,23 +1057,11 @@ textarea:focus {
     margin-bottom: 20px;
 }
 
-.auth-kicker-logo {
+.auth-kicker-logo-img {
     width: 36px;
     height: 36px;
-    border-radius: var(--r-sm);
-    background: linear-gradient(135deg, #D914B5, var(--wb-dark));
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: white;
-    font-size: 13px;
-    font-weight: 800;
-    box-shadow: 0 4px 14px var(--wb-glow);
-}
-.auth-kicker-logo-img {
-    width: 48px;
-    height: 48px;
     object-fit: contain;
+    border-radius: 8px;
 }
 
 .auth-kicker-text {
@@ -962,6 +1101,15 @@ textarea:focus {
     text-align: center;
 }
 
+@media (max-width: 768px) {
+    .login-split { flex-direction: column; }
+    .login-promo { padding: 40px 24px; flex: none; }
+    .login-promo__title { font-size: 1.5rem; }
+    .login-form-wrap { flex: none; padding: 32px 20px; }
+    .login-price { flex-direction: column; gap: 8px; text-align: center; }
+    .login-price__desc { max-width: none; }
+}
+
 /* ─── Utility ────────────────────────────────────────────────────── */
 .hint { font-size: 14px; color: var(--muted); }
 .inline-form { margin: 0; }

templates/login.html

@@ -7,14 +7,62 @@
     <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}" />
 </head>
 <body>
-    <div class="auth-shell">
+<div class="login-split">
+
+    <!-- Левая панель — маркетинг -->
+    <div class="login-promo">
+        <div class="login-promo__inner">
+            <img src="{{ url_for('static', filename='wb.png') }}" class="login-promo__logo" alt="WB Feedback">
+
+            <h1 class="login-promo__title">Автоответы на отзывы<br>Wildberries — на автопилоте</h1>
+            <p class="login-promo__sub">Сервис сам отвечает на отзывы покупателей пока вы занимаетесь бизнесом. Никаких ручных ответов, никаких пропущенных оценок.</p>
+
+            <ul class="login-features">
+                <li class="login-features__item">
+                    <span class="login-features__icon">⚡</span>
+                    <div>
+                        <strong>Автоответы 24/7</strong>
+                        <span>Отвечает на 4★ и 5★ без текста автоматически, по расписанию</span>
+                    </div>
+                </li>
+                <li class="login-features__item">
+                    <span class="login-features__icon">✏️</span>
+                    <div>
+                        <strong>Свои шаблоны</strong>
+                        <span>Настройте уникальные ответы для каждой оценки — звучит как живой человек</span>
+                    </div>
+                </li>
+                <li class="login-features__item">
+                    <span class="login-features__icon">🏪</span>
+                    <div>
+                        <strong>Несколько магазинов</strong>
+                        <span>Управляйте всеми аккаунтами WB из одного кабинета</span>
+                    </div>
+                </li>
+                <li class="login-features__item">
+                    <span class="login-features__icon">📋</span>
+                    <div>
+                        <strong>Журнал и очередь</strong>
+                        <span>Видите каждый отправленный ответ с датой, оценкой и текстом</span>
+                    </div>
+                </li>
+            </ul>
+
+            <div class="login-price">
+                <div class="login-price__amount">200 ₽<span>/мес</span></div>
+                <div class="login-price__desc">Один платёж — все магазины, без ограничений на количество отзывов</div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Правая панель — форма -->
+    <div class="login-form-wrap">
         <section class="auth-card">
             <div class="auth-kicker">
                 <img src="{{ url_for('static', filename='wb.png') }}" class="auth-kicker-logo-img" alt="WB">
-                <span class="auth-kicker-text">Wildberries Feedback</span>
+                <span class="auth-kicker-text">WB Feedback</span>
             </div>
-            <h1>Добро пожаловать</h1>
+            <h2 class="login-form-title">Войдите в кабинет</h2>
-            <p class="auth-subtitle">Управляйте отзывами, ответами и автоответом в одном кабинете.</p>
 
             {% if error_message %}
                 <div class="alert alert-error">{{ error_message }}</div>
@@ -35,5 +83,7 @@
             <p class="auth-footer">Нет аккаунта? <a href="{{ url_for('register') }}">Запросить доступ</a></p>
         </section>
     </div>
+
+</div>
 </body>
 </html>