From 21ffbbfe6ce0e40fb9d8aaec9694aef67da2b6b0 Mon Sep 17 00:00:00 2001
From: Maxim Dolgolyov <maxim.dolgolyov@gmail.com>
Date: Thu, 25 Jun 2026 16:48:08 +0300
Subject: [PATCH] =?UTF-8?q?style(trainer):=20=D0=BF=D1=80=D0=B5=D0=BC?=
 =?UTF-8?q?=D0=B8=D1=83=D0=BC-=D0=BA=D0=BE=D0=BD=D1=81=D0=BE=D0=BB=D1=8C?=
 =?UTF-8?q?=20=E2=80=94=20=D0=B4=D0=B2=D1=83=D1=85=D0=BF=D0=B0=D0=BD=D0=B5?=
 =?UTF-8?q?=D0=BB=D1=8C=D0=BD=D1=8B=D0=B9=20=D1=80=D0=B0=D0=B1=D0=BE=D1=87?=
 =?UTF-8?q?=D0=B8=D0=B9=20=D1=81=D1=82=D0=BE=D0=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Полный визуальный редизайн страницы /trainer (разметка-каркас + CSS).
Логика не тронута (генераторы, адаптив, шаги, аналитика, конструктор):
сохранены все DOM-ID и инжектируемые классы. Кольцо мастерства в рейле
запитано из существующей updateOverall() (только отражает данные).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/trainer.html | 665 ++++++++++++++++++++++++------------------
 1 file changed, 380 insertions(+), 285 deletions(-)

diff --git a/frontend/trainer.html b/frontend/trainer.html
index bdfbce9..dd9c75b 100644
--- a/frontend/trainer.html
+++ b/frontend/trainer.html
@@ -10,231 +10,307 @@
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css"/>
   <script src="https://unpkg.com/lucide@0.469.0/dist/umd/lucide.min.js"></script>
   <style>
-    /* ═══════════════ Тренажёр — «рабочий лист в клетку» ═══════════════
-       Фон — ambient-клетка (материал предмета: тетрадь в клетку). Задача —
-       чистая карточка-герой с акцентной «решающей» полосой. Акцент индиго→
-       фиолет, успех — изумруд, мастерство — золото. Логика/классы не менялись. */
+    /* ═══════════════════════════════════════════════════════════════════
+       ТРЕНАЖЁР — премиум-консоль. Двухпанельный «рабочий стол»: слева панель
+       прогресса/навигации, справа кинематографичная карточка-задача. Индиго→
+       фиолет, изумруд — успех, золото — мастерство. Мягкая глубина (clay),
+       стекло, aurora-фон с тетрадной клеткой. Шрифт Manrope, математика serif.
+       ⛔ Логика/ID/инжектируемые классы НЕ менялись — только визуальный слой. */
     :root {
-      --ink: #1b1f38; --ink-soft: #5b6378; --ink-faint: #98a1b8;
+      --ink: #181b34; --ink-soft: #565d77; --ink-faint: #98a0bb;
       --card: #ffffff;
-      --g1: #6366f1; --g2: #8b5cf6;
+      --g1: #6366f1; --g2: #8b5cf6; --g0: #4f46e5;
       --accent-ink: #4338ca; --accent-soft: #eef0ff;
       --ok: #10b981; --ok-ink: #047857; --ok-soft: #dcfce7;
       --bad: #ef4444; --bad-soft: #fee2e2; --warn: #d97706;
       --gold: #f59e0b;
-      --r-lg: 24px;
+      --line: rgba(99,102,241,.14);
+      --r-lg: 26px; --r-md: 18px;
       --sh: 0 16px 40px rgba(27,31,56,.09), 0 2px 6px rgba(27,31,56,.04);
       --sh-lg: 0 30px 70px rgba(27,31,56,.20);
+      --sh-1: 0 1px 0 rgba(255,255,255,.8) inset, 0 2px 6px rgba(27,31,56,.05), 0 18px 40px -24px rgba(80,70,200,.30);
+      --sh-2: 0 1px 0 rgba(255,255,255,.7) inset, 0 8px 20px -10px rgba(27,31,56,.14), 0 34px 70px -34px rgba(80,70,200,.45);
       --ease: cubic-bezier(.22,.61,.36,1);
     }
     .sb-content {
-      background-color: #f5f6fb;
+      background-color: #eef0f8;
       background-image:
-        radial-gradient(1000px 600px at 86% -10%, rgba(139,92,246,.10), transparent 60%),
-        radial-gradient(820px 560px at 2% -6%, rgba(99,102,241,.09), transparent 55%),
-        linear-gradient(rgba(99,102,241,.05) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(99,102,241,.05) 1px, transparent 1px);
-      background-size: 100% 100%, 100% 100%, 26px 26px, 26px 26px;
+        radial-gradient(1100px 680px at 90% -12%, rgba(139,92,246,.15), transparent 58%),
+        radial-gradient(900px 620px at -6% 4%, rgba(99,102,241,.14), transparent 55%),
+        radial-gradient(760px 600px at 60% 118%, rgba(56,189,248,.08), transparent 60%),
+        linear-gradient(rgba(99,102,241,.045) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(99,102,241,.045) 1px, transparent 1px);
+      background-size: 100% 100%, 100% 100%, 100% 100%, 28px 28px, 28px 28px;
       background-attachment: fixed;
     }
-    .tr-wrap { max-width: 740px; margin: 0 auto; padding: 34px 20px 90px; }
-    @keyframes trUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
-    .tr-head, .tr-overall, .tr-mode, .tr-subjects, .tr-topbar, .tr-skillpanel, .tr-card { animation: trUp .5s var(--ease) both; }
-    .tr-overall { animation-delay: .04s; } .tr-mode { animation-delay: .06s; }
-    .tr-subjects { animation-delay: .08s; } .tr-topbar { animation-delay: .1s; } .tr-skillpanel { animation-delay: .13s; } .tr-card { animation-delay: .16s; }
+    .tr-wrap { max-width: 1240px; margin: 0 auto; padding: 22px 28px 90px; font-family: 'Manrope', system-ui, sans-serif; color: var(--ink); }
 
-    /* ── фильтр по предмету (Алгебра / Геометрия) ── */
-    .tr-subjects { display: flex; gap: 7px; margin-bottom: 14px; }
-    .tr-subjects:empty { display: none; }
-    .tr-subbtn { font: inherit; font-size: .86rem; font-weight: 800; cursor: pointer; padding: 8px 18px; border-radius: 99px; border: 1px solid rgba(99,102,241,.2); background: #fff; color: var(--ink-soft); transition: .16s var(--ease); }
-    .tr-subbtn:hover { border-color: var(--g1); color: var(--accent-ink); }
-    .tr-subbtn.on { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--g1), var(--g2)); box-shadow: 0 8px 20px rgba(99,102,241,.3); }
-
-    .tr-head { margin-bottom: 20px; }
-    .tr-h1 {
-      font-family: 'Manrope', sans-serif; font-weight: 800; font-size: clamp(1.6rem, 4.4vw, 2.1rem);
-      letter-spacing: -.02em; color: var(--ink); margin: 0 0 6px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
-    }
-    .tr-sub { color: var(--ink-soft); font-size: .95rem; line-height: 1.5; }
-    .tr-pill {
-      display: inline-block; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
-      padding: 5px 11px; border-radius: 99px; color: #fff; vertical-align: middle;
-      background: linear-gradient(135deg, var(--g1), var(--g2)); box-shadow: 0 6px 16px rgba(99,102,241,.30);
-    }
-
-    /* ── выбор темы (вкладки) ── */
-    .tr-topbar { margin: 18px 0 14px; }
-    .tr-nav-eyebrow { display: block; font-family: 'Manrope', sans-serif; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); margin-bottom: 9px; }
-    .tr-topics { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
-    .tr-grade { display: inline-flex; align-items: center; justify-content: center; margin-left: 7px; font-family: 'Manrope', sans-serif; font-size: .6rem; font-weight: 800; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: rgba(99,102,241,.14); color: var(--accent-ink); }
-    .tr-chip.on .tr-grade { background: rgba(255,255,255,.26); color: #fff; }
-
-    /* ── панель навыков выбранной темы ── */
-    .tr-skillpanel { background: rgba(99,102,241,.05); border: 1px solid rgba(99,102,241,.12); border-radius: 16px; padding: 13px 15px; margin-bottom: 22px; }
-    .tr-skillpanel-hd { font-family: 'Manrope', sans-serif; font-size: .74rem; font-weight: 800; color: var(--accent-ink); margin-bottom: 10px; }
-    .tr-chip {
-      font: inherit; font-size: .86rem; font-weight: 700; cursor: pointer; color: var(--ink-soft);
-      padding: 9px 16px; border-radius: 99px; border: 1px solid rgba(99,102,241,.18);
-      background: rgba(255,255,255,.7); backdrop-filter: blur(6px); transition: .18s var(--ease);
-    }
-    .tr-chip:hover { border-color: var(--g1); color: var(--accent-ink); transform: translateY(-1px); }
-    .tr-chip.on { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--g1), var(--g2)); box-shadow: 0 8px 20px rgba(99,102,241,.34); }
-
-    /* ── карточка задачи (герой) ── */
-    .tr-card {
-      position: relative; overflow: hidden; background: var(--card);
-      border: 1px solid rgba(99,102,241,.12); border-radius: var(--r-lg);
-      box-shadow: var(--sh); transition: box-shadow .3s var(--ease), transform .3s var(--ease);
-    }
-    .tr-card.tr-correct { box-shadow: 0 22px 56px rgba(16,185,129,.30); animation: trPop .5s var(--ease); }
-    .tr-card.tr-wrong { animation: trShake .42s var(--ease); }
-    @keyframes trPop { 0% { transform: scale(1); } 32% { transform: scale(1.014); } 100% { transform: scale(1); } }
+    @keyframes trUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
+    @keyframes trPop { 0% { transform: scale(1); } 32% { transform: scale(1.012); } 100% { transform: scale(1); } }
     @keyframes trShake { 0%,100% { transform: translateX(0); } 18% { transform: translateX(-7px); } 38% { transform: translateX(6px); } 58% { transform: translateX(-4px); } 78% { transform: translateX(2px); } }
+    @keyframes trFade { from { opacity: 0; } to { opacity: 1; } }
+    @keyframes ringIn { from { stroke-dashoffset: 339.292; } }
 
-    /* ── «сцена»-герой: уравнение крупно на ярком градиенте ── */
+    /* ═══════════ верхняя панель (стекло, плавающая) ═══════════ */
+    .tr-topbar2 {
+      position: sticky; top: 14px; z-index: 30;
+      display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
+      padding: 13px 16px 13px 20px; margin-bottom: 22px;
+      background: rgba(255,255,255,.72); backdrop-filter: blur(18px) saturate(1.4);
+      border: 1px solid rgba(255,255,255,.7); border-radius: 20px; box-shadow: var(--sh-1);
+      animation: trUp .5s var(--ease) both;
+    }
+    .tr-brand { display: flex; align-items: center; gap: 13px; min-width: 0; }
+    .tr-brand-mark { width: 42px; height: 42px; border-radius: 13px; background: linear-gradient(135deg, var(--g0), var(--g2)); box-shadow: 0 10px 22px rgba(99,102,241,.4); display: grid; place-items: center; color: #fff; flex: none; }
+    .tr-brand-mark .ic { width: 22px; height: 22px; }
+    .tr-h1 { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.34rem; letter-spacing: -.02em; margin: 0; line-height: 1.1; color: var(--ink); }
+    .tr-brand-sub { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
+    .tr-pill {
+      display: inline-block; font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
+      padding: 4px 10px; border-radius: 99px; color: #fff;
+      background: linear-gradient(135deg, var(--g1), var(--g2)); box-shadow: 0 6px 14px rgba(99,102,241,.3);
+    }
+    .tr-modes { display: flex; align-items: center; gap: 9px; margin-left: auto; flex-wrap: wrap; }
+
+    /* умная тренировка — премиальный тумблер-капсула */
+    .tr-smart {
+      display: inline-flex; align-items: center; gap: 11px; cursor: pointer; user-select: none;
+      padding: 7px 8px 7px 15px; border-radius: 99px; border: 1px solid var(--line);
+      background: #fff; box-shadow: var(--sh-1); transition: .18s var(--ease);
+    }
+    .tr-smart:hover { border-color: var(--g1); }
+    .tr-smart:focus-visible { outline: none; border-color: var(--g1); box-shadow: 0 0 0 4px rgba(99,102,241,.18); }
+    .tr-smart-txt { font-size: .82rem; font-weight: 800; color: var(--ink); display: inline-flex; align-items: center; gap: 7px; }
+    .tr-smart-txt .ic { width: 16px; height: 16px; color: var(--g1); }
+    .tr-switch { width: 42px; height: 24px; border-radius: 99px; background: rgba(99,102,241,.18); position: relative; transition: .2s var(--ease); flex: none; }
+    .tr-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: .2s var(--ease); }
+    .tr-smart.on .tr-switch { background: linear-gradient(135deg, var(--g1), var(--g2)); box-shadow: 0 6px 14px rgba(99,102,241,.4); }
+    .tr-smart.on .tr-switch::after { left: 21px; }
+
+    .tr-session { display: inline-flex; align-items: center; font-size: .8rem; font-weight: 800; color: var(--accent-ink); padding: 8px 14px; border-radius: 99px; background: rgba(99,102,241,.1); }
+    .tr-session:empty { display: none; }
+
+    .tr-mode-btn {
+      font: inherit; font-size: .8rem; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
+      padding: 9px 15px; border-radius: 99px; border: 1px solid var(--line); background: #fff; color: var(--ink-soft);
+      box-shadow: var(--sh-1); transition: .16s var(--ease);
+    }
+    .tr-mode-btn .ic { width: 16px; height: 16px; }
+    .tr-mode-btn:hover { border-color: var(--g1); color: var(--accent-ink); transform: translateY(-1px); }
+    .tr-admin-btn { color: #fff; border-color: transparent; background: linear-gradient(135deg, #f59e0b, #f97316); box-shadow: 0 8px 18px rgba(245,158,11,.32); }
+    .tr-admin-btn:hover { color: #fff; transform: translateY(-1px); }
+
+    /* ═══════════ двухпанельная сетка ═══════════ */
+    .tr-grid { display: grid; grid-template-columns: 312px minmax(0, 1fr); gap: 22px; align-items: start; }
+    .tr-rail { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 16px; animation: trUp .55s var(--ease) both; animation-delay: .05s; }
+    .tr-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; animation: trUp .55s var(--ease) both; animation-delay: .1s; }
+    .tr-panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
+    /* секция «Предмет» скрывается, когда фильтр предметов пуст (один предмет) */
+    .tr-rail-sec:has(#tr-subjects:empty) { display: none; }
+
+    /* ── панель прогресса (кольцо мастерства) ── */
+    .tr-progress-card { padding: 20px; }
+    .tr-ring-row { display: flex; align-items: center; gap: 16px; }
+    .tr-ring { width: 92px; height: 92px; flex: none; position: relative; }
+    .tr-ring #tr-ring-arc { animation: ringIn 1s var(--ease); }
+    .tr-ring-core { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
+    .tr-ring-core b { font-size: 1.15rem; font-weight: 800; line-height: 1; color: var(--ink); }
+    .tr-ring-den { font-size: .7em; color: var(--ink-faint); }
+    .tr-ring-core span { font-size: .56rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); margin-top: 2px; }
+    .tr-progress-meta b { display: block; font-weight: 800; font-size: 1.02rem; color: var(--ink); }
+    .tr-progress-meta span { font-size: .82rem; color: var(--ink-soft); line-height: 1.45; }
+    .tr-overall { display: none; }   /* свёрнут в кольцо; элемент сохранён для JS */
+
+    .tr-stat-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
+    .tr-tile { padding: 13px; border-radius: var(--r-md); background: linear-gradient(180deg, #fbfbff, #f3f4fd); border: 1px solid var(--line); text-align: center; }
+    .tr-tile b { display: block; font-size: 1.7rem; font-weight: 800; line-height: 1; background: linear-gradient(135deg, var(--g1), var(--g2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
+    .tr-tile.gold b { background: linear-gradient(135deg, var(--gold), #f97316); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
+    .tr-tile span { display: block; margin-top: 5px; font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
+
+    /* ── секции рейла ── */
+    .tr-rail-sec { padding: 16px 18px 18px; }
+    .tr-rail-hd { font-family: 'Manrope', sans-serif; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-faint); margin: 0 0 12px; display: flex; align-items: center; gap: 7px; }
+    .tr-rail-hd .ic { width: 14px; height: 14px; color: var(--g1); }
+
+    /* сегмент-контрол предмета */
+    .tr-subjects { display: flex; gap: 5px; padding: 4px; border-radius: 14px; background: rgba(99,102,241,.08); }
+    .tr-subjects:empty { display: none; }
+    .tr-subbtn { flex: 1; font: inherit; font-size: .82rem; font-weight: 800; cursor: pointer; padding: 8px 12px; border-radius: 10px; border: none; background: transparent; color: var(--ink-soft); transition: .16s var(--ease); }
+    .tr-subbtn:hover { color: var(--accent-ink); }
+    .tr-subbtn.on { color: var(--accent-ink); background: #fff; box-shadow: 0 4px 12px rgba(27,31,56,.1); }
+
+    /* список тем (вертикальная навигация) */
+    .tr-topics { display: flex; flex-direction: column; gap: 5px; }
+    .tr-chip {
+      font: inherit; font-family: 'Manrope', sans-serif; font-size: .9rem; font-weight: 700; cursor: pointer; color: var(--ink-soft); text-align: left;
+      display: flex; align-items: center; gap: 9px; width: 100%; padding: 11px 13px; border-radius: 13px;
+      border: 1px solid transparent; background: transparent; transition: .16s var(--ease);
+    }
+    .tr-chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: rgba(99,102,241,.3); flex: none; transition: .16s var(--ease); }
+    .tr-chip:hover { background: rgba(99,102,241,.07); color: var(--accent-ink); }
+    .tr-chip:hover::before { background: var(--g1); transform: scale(1.25); }
+    .tr-chip.on { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--g1), var(--g2)); box-shadow: 0 10px 22px -8px rgba(99,102,241,.6); }
+    .tr-chip.on::before { background: #fff; }
+    .tr-grade { display: inline-flex; align-items: center; justify-content: center; font-family: 'Manrope', sans-serif; font-size: .58rem; font-weight: 800; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: rgba(99,102,241,.14); color: var(--accent-ink); }
+    /* первый мета-элемент чипа (класс/звезда) — к правому краю; если есть оба — рядом */
+    .tr-chip > .tr-grade, .tr-chip > .tr-badge { margin-left: auto; }
+    .tr-chip > .tr-grade ~ .tr-badge { margin-left: 6px; }
+    .tr-chip.on .tr-grade { background: rgba(255,255,255,.26); color: #fff; }
+    .tr-badge { display: inline-flex; color: var(--ok); }
+    .tr-badge .ic { width: 15px; height: 15px; }
+    .tr-chip.on .tr-badge { color: #fff; }
+    .tr-badge-n { font-size: .66rem; font-weight: 800; color: var(--ink-faint); background: rgba(99,102,241,.12); border-radius: 99px; padding: 1px 7px; }
+    .tr-chip.on .tr-badge-n { color: #fff; background: rgba(255,255,255,.24); }
+
+    /* ═══════════ навыки текущей темы (над карточкой) ═══════════ */
+    .tr-skillbar { padding: 14px 18px; }
+    .tr-skillpanel-hd { font-family: 'Manrope', sans-serif; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-faint); margin-bottom: 11px; }
+    .tr-skills { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; }
+    .tr-skills .tr-skill {
+      font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer; font-family: 'Cambria Math', 'Times New Roman', serif;
+      padding: 8px 14px; border-radius: 11px; border: 1px solid var(--line); background: rgba(255,255,255,.7);
+      color: var(--ink-soft); transition: .16s var(--ease); display: inline-flex; align-items: center; gap: 6px;
+    }
+    .tr-skills .tr-skill:hover { border-color: var(--g1); color: var(--accent-ink); transform: translateY(-1px); }
+    .tr-skills .tr-skill.on { background: var(--accent-soft); border-color: var(--g1); color: var(--accent-ink); box-shadow: 0 6px 14px -6px rgba(99,102,241,.4); }
+    .tr-pool-info { font-size: .82rem; color: var(--ink-soft); align-self: center; margin-right: 6px; }
+    #tr-gen-btn { border-style: dashed; color: var(--accent-ink); }
+
+    /* ═══════════ карточка-задача (герой) ═══════════ */
+    .tr-card {
+      position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--line);
+      border-radius: var(--r-lg); box-shadow: var(--sh-2); transition: box-shadow .3s var(--ease), transform .3s var(--ease);
+    }
+    .tr-card.tr-correct { box-shadow: 0 30px 70px -28px rgba(16,185,129,.6); animation: trPop .5s var(--ease); }
+    .tr-card.tr-wrong { animation: trShake .42s var(--ease); }
+
+    /* сцена-герой */
     .tr-stage {
       position: relative; overflow: hidden; text-align: center; color: #fff;
-      padding: 32px 28px 36px; transition: background .35s var(--ease);
+      padding: 30px 30px 38px; transition: background .35s var(--ease);
       background: linear-gradient(135deg, #4f46e5 0%, #6d3aed 52%, #8b5cf6 100%);
     }
     .tr-stage::before {
-      content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .55;
+      content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .6;
       background-image:
-        radial-gradient(440px 220px at 80% -25%, rgba(255,255,255,.20), transparent 60%),
+        radial-gradient(520px 260px at 82% -30%, rgba(255,255,255,.28), transparent 60%),
+        radial-gradient(420px 320px at 8% 130%, rgba(0,0,0,.18), transparent 60%),
         linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
         linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
-      background-size: 100% 100%, 22px 22px, 22px 22px;
+      background-size: 100% 100%, 100% 100%, 24px 24px, 24px 24px;
     }
     .tr-stage > * { position: relative; }
     .tr-card.tr-correct .tr-stage { background: linear-gradient(135deg, #059669, #10b981 58%, #34d399); }
     .tr-card.tr-wrong .tr-stage   { background: linear-gradient(135deg, #dc2626, #ef4444 58%, #fb7185); }
-    .tr-work { padding: 24px 26px 28px; }
-
-    /* ── уровни сложности ── */
-    .tr-difficulty { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: center; margin-bottom: 18px; }
-    .tr-diff-label { font-size: .72rem; font-weight: 800; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; margin-right: 2px; }
-    .tr-diff-btn { font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; padding: 5px 13px; border-radius: 99px; border: 1px solid rgba(99,102,241,.2); background: #fff; color: var(--ink-soft); transition: .14s var(--ease); }
-    .tr-diff-btn:hover { border-color: var(--g1); color: var(--accent-ink); }
-    .tr-diff-btn.on { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--g1), var(--g2)); box-shadow: 0 6px 14px rgba(99,102,241,.26); }
 
     #tr-skill {
-      color: rgba(255,255,255,.75); font-family: 'Manrope', sans-serif; font-size: .72rem; font-weight: 800;
-      text-transform: uppercase; letter-spacing: .1em; margin-bottom: 14px;
+      color: rgba(255,255,255,.82); font-family: 'Manrope', sans-serif; font-size: .7rem; font-weight: 800;
+      text-transform: uppercase; letter-spacing: .12em; margin-bottom: 16px;
     }
     .tr-eq {
       font-family: 'Cambria Math', 'Times New Roman', Georgia, serif;
-      font-size: clamp(1.9rem, 5.6vw, 2.7rem); font-weight: 600; letter-spacing: .01em;
-      color: #fff; text-align: center; padding: 2px 0; user-select: none; text-shadow: 0 2px 14px rgba(0,0,0,.18);
+      font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 600; letter-spacing: .01em;
+      color: #fff; text-align: center; padding: 2px 0; user-select: none; text-shadow: 0 2px 18px rgba(0,0,0,.22);
     }
+    .tr-eq .katex-display { margin: 0; }
+    .tr-eq .katex { font-size: 1.16em; color: #fff; }
+    /* текстовый prompt (проценты/упрощение) — компактнее уравнения, на сцене белым */
+    .tr-eq.tr-eq-text { font-family: 'Manrope', sans-serif; font-weight: 600; font-size: clamp(1.2rem, 3vw, 1.7rem); line-height: 1.45; color: #fff; }
 
-    .tr-inrow { display: flex; gap: 10px; align-items: stretch; max-width: 440px; margin: 0 auto; }
-    #tr-eqx { font-family: 'Cambria Math', serif; font-size: 1.5rem; font-weight: 600; color: var(--accent-ink); align-self: center; padding-left: 4px; }
+    .tr-work { padding: 24px 28px 28px; }
+
+    /* ── уровни сложности ── */
+    .tr-difficulty { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; margin-bottom: 22px; }
+    .tr-diff-label { font-size: .68rem; font-weight: 800; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .07em; margin-right: 4px; }
+    .tr-diff-btn { font: inherit; font-size: .8rem; font-weight: 800; cursor: pointer; padding: 6px 14px; border-radius: 99px; border: 1px solid var(--line); background: #fff; color: var(--ink-soft); transition: .14s var(--ease); }
+    .tr-diff-btn:hover { border-color: var(--g1); color: var(--accent-ink); }
+    .tr-diff-btn.on { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--g1), var(--g2)); box-shadow: 0 8px 16px -6px rgba(99,102,241,.5); }
+
+    /* строка ответа */
+    .tr-inrow { display: flex; gap: 10px; align-items: stretch; max-width: 460px; margin: 0 auto; }
+    #tr-eqx { font-family: 'Cambria Math', serif; font-size: 1.55rem; font-weight: 600; color: var(--accent-ink); align-self: center; padding-left: 4px; }
     .tr-input {
-      flex: 1; min-width: 0; font: inherit; font-size: 1.2rem; font-weight: 600; text-align: center; color: var(--ink);
-      padding: 13px 16px; border-radius: 14px; border: 2px solid rgba(99,102,241,.22); background: #fff; outline: none; transition: .18s var(--ease);
+      flex: 1; min-width: 0; font: inherit; font-size: 1.25rem; font-weight: 700; text-align: center; color: var(--ink);
+      padding: 14px 16px; border-radius: 15px; border: 2px solid rgba(99,102,241,.22); background: #fbfbff; outline: none; transition: .18s var(--ease);
     }
     .tr-input::placeholder { color: var(--ink-faint); font-weight: 500; }
-    .tr-input:focus { border-color: var(--g1); box-shadow: 0 0 0 4px rgba(99,102,241,.16); }
+    .tr-input:focus { border-color: var(--g1); background: #fff; box-shadow: 0 0 0 4px rgba(99,102,241,.16); }
     .tr-input:disabled { background: #f3f4fb; color: var(--ink-soft); }
 
-    .tr-btn {
-      font: inherit; font-weight: 700; cursor: pointer; border: none; border-radius: 14px;
-      padding: 13px 22px; transition: .18s var(--ease); display: inline-flex; align-items: center; gap: 7px;
-    }
+    .tr-btn { font: inherit; font-weight: 800; cursor: pointer; border: none; border-radius: 15px; padding: 14px 22px; transition: .18s var(--ease); display: inline-flex; align-items: center; gap: 7px; }
     .tr-btn .ic { width: 17px; height: 17px; }
-    .tr-primary { color: #fff; background: linear-gradient(135deg, var(--g1), var(--g2)); box-shadow: 0 10px 24px rgba(99,102,241,.34); }
-    .tr-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(99,102,241,.42); }
+    .tr-primary { color: #fff; background: linear-gradient(135deg, var(--g1), var(--g2)); box-shadow: 0 12px 26px -8px rgba(99,102,241,.7); }
+    .tr-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -8px rgba(99,102,241,.8); }
     .tr-primary:active { transform: translateY(0); }
     .tr-ghost { background: rgba(99,102,241,.08); color: var(--accent-ink); }
     .tr-ghost:hover { background: rgba(99,102,241,.15); }
 
-    .tr-feedback {
-      width: fit-content; margin: 20px auto 2px; min-height: 28px; padding: 7px 16px; border-radius: 99px;
-      font-weight: 700; font-size: 1rem; display: flex; align-items: center; justify-content: center; gap: 9px; transition: .2s var(--ease);
-    }
-    .tr-feedback:empty { padding: 0; min-height: 0; }
+    /* клавиатура */
+    .tr-keypad { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 460px; margin: 12px auto 0; }
+    .tr-key { font: inherit; font-size: .98rem; font-weight: 700; font-family: 'Cambria Math', serif; cursor: pointer; min-width: 42px; padding: 8px 11px; border-radius: 11px; border: 1px solid var(--line); background: linear-gradient(180deg, #fff, #f4f5fd); color: var(--accent-ink); box-shadow: 0 2px 0 rgba(99,102,241,.12); transition: .12s var(--ease); }
+    .tr-key:hover { border-color: var(--g1); background: var(--accent-soft); transform: translateY(-1px); }
+    .tr-key:active { transform: translateY(1px); box-shadow: none; }
+    .tr-key .ic { width: 16px; height: 16px; }
+
+    .tr-preview { text-align: center; margin: 14px auto 0; color: var(--ink-soft); }
+    .tr-preview:empty { display: none; }
+    .tr-preview .katex { font-size: 1.14em; }
+
+    .tr-feedback { width: fit-content; margin: 20px auto 2px; min-height: 28px; padding: 8px 18px; border-radius: 99px; font-weight: 800; font-size: 1rem; display: flex; align-items: center; justify-content: center; gap: 9px; transition: .2s var(--ease); }
+    .tr-feedback:empty { padding: 0; min-height: 0; margin: 0; }
     .tr-feedback .ic { width: 19px; height: 19px; }
     .tr-feedback.ok   { color: var(--ok-ink); background: var(--ok-soft); }
     .tr-feedback.bad  { color: #b91c1c; background: var(--bad-soft); }
-    .tr-feedback.warn { color: var(--warn); background: #fef3c7; font-weight: 600; }
+    .tr-feedback.warn { color: var(--warn); background: #fef3c7; font-weight: 700; }
 
-    .tr-actions { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: 16px; }
+    .tr-actions { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: 18px; }
 
-    /* ── мат-клавиатура + live-превью (P8) ── */
-    .tr-keypad { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 440px; margin: 10px auto 0; }
-    .tr-key { font: inherit; font-size: .95rem; font-weight: 700; font-family: 'Cambria Math', serif; cursor: pointer; min-width: 40px; padding: 7px 10px; border-radius: 10px; border: 1px solid rgba(99,102,241,.18); background: rgba(255,255,255,.8); color: var(--accent-ink); transition: .14s var(--ease); }
-    .tr-key:hover { border-color: var(--g1); background: var(--accent-soft); transform: translateY(-1px); }
-    .tr-key:active { transform: translateY(0); }
-    .tr-key .ic { width: 16px; height: 16px; }
-    .tr-preview { text-align: center; margin: 12px auto 0; color: var(--ink-soft); }
-    .tr-preview:empty { display: none; }
-    .tr-preview .katex { font-size: 1.12em; }
-
-    /* ── пошаговое решение / репетитор (P7) ── */
+    /* пошаговое решение / репетитор (P7) */
     .tr-steps { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
     .tr-steps:empty { display: none; }
-    .tr-step-line { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: linear-gradient(180deg, #f4fbf7, #ecf9f1); border: 1px solid rgba(16,185,129,.22); animation: trUp .25s var(--ease) both; }
-    .tr-step-ic { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--ok); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
+    .tr-step-line { display: flex; align-items: center; gap: 12px; padding: 11px 15px; border-radius: 13px; background: linear-gradient(180deg, #f4fbf7, #ecf9f1); border: 1px solid rgba(16,185,129,.22); animation: trUp .25s var(--ease) both; }
+    .tr-step-ic { flex: none; width: 23px; height: 23px; border-radius: 50%; background: var(--ok); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
     .tr-step-ic .ic { width: 14px; height: 14px; }
-    .tr-step-tex { font-family: 'Cambria Math', serif; font-size: 1.12rem; color: var(--ink); }
+    .tr-step-tex { font-family: 'Cambria Math', serif; font-size: 1.14rem; color: var(--ink); }
 
-    .tr-solution {
-      margin-top: 22px; padding: 18px 20px; border-radius: 16px;
-      background: linear-gradient(180deg, #fbfbff, #f4f5fd); border: 1px solid rgba(99,102,241,.14);
-      animation: trUp .35s var(--ease) both;
-    }
-    .tr-solution h4 { margin: 0 0 12px; font-family: 'Manrope', sans-serif; font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--accent-ink); font-weight: 800; }
-    .tr-step { color: #334155; padding: 12px 0; }
+    /* решение — нумерованная лента */
+    .tr-solution { margin-top: 22px; padding: 20px 22px; border-radius: var(--r-md); background: linear-gradient(180deg, #fbfbff, #f4f5fd); border: 1px solid var(--line); animation: trUp .35s var(--ease) both; }
+    .tr-solution h4 { margin: 0 0 14px; font-family: 'Manrope', sans-serif; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-ink); font-weight: 800; }
+    .tr-step { color: #334155; padding: 13px 0; }
     .tr-step + .tr-step { border-top: 1px dashed rgba(99,102,241,.2); }
     .tr-step-note { display: block; color: var(--ink-soft); font-family: 'Manrope', sans-serif; font-size: .92rem; line-height: 1.6; margin-bottom: 7px; }
-    .tr-step-math { display: block; font-family: 'Cambria Math', serif; font-size: 1.18rem; color: var(--ink); margin-left: 30px; }
-    .tr-step-n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--g1), var(--g2)); color: #fff; font-family: 'Manrope', sans-serif; font-size: .72rem; font-weight: 800; margin-right: 9px; vertical-align: 1px; }
-    .tr-eq .katex-display { margin: 0; }
-    .tr-eq .katex { font-size: 1.12em; color: #fff; }
-    /* текстовый prompt (проценты/упрощение) — компактнее уравнения, на сцене белым */
-    .tr-eq.tr-eq-text { font-family: 'Manrope', sans-serif; font-weight: 600; font-size: clamp(1.15rem, 3.4vw, 1.6rem); line-height: 1.45; color: #fff; }
+    .tr-step-math { display: block; font-family: 'Cambria Math', serif; font-size: 1.2rem; color: var(--ink); margin-left: 31px; }
+    .tr-step-n { display: inline-flex; align-items: center; justify-content: center; width: 23px; height: 23px; border-radius: 50%; background: linear-gradient(135deg, var(--g1), var(--g2)); color: #fff; font-family: 'Manrope', sans-serif; font-size: .72rem; font-weight: 800; margin-right: 9px; vertical-align: 1px; }
 
-    /* выбор навыка внутри темы (внутри панели) */
-    .tr-skills { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; }
-    .tr-skills .tr-skill {
-      font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; font-family: 'Cambria Math', 'Times New Roman', serif;
-      padding: 7px 13px; border-radius: 11px; border: 1px solid rgba(99,102,241,.16); background: rgba(255,255,255,.7);
-      color: var(--ink-soft); transition: .16s var(--ease); display: inline-flex; align-items: center;
-    }
-    .tr-skills .tr-skill:hover { border-color: var(--g1); color: var(--accent-ink); transform: translateY(-1px); }
-    .tr-skills .tr-skill.on { background: var(--accent-soft); border-color: var(--g1); color: var(--accent-ink); }
-    .tr-pool-info { font-size: .82rem; color: var(--ink-soft); align-self: center; margin-right: 6px; }
-    #tr-gen-btn { border-style: dashed; color: var(--accent-ink); }
+    /* ── итог сессии ── */
+    .tr-summary { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px 28px; box-shadow: var(--sh-2); text-align: center; animation: trPop .5s var(--ease); }
+    .tr-summary::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, var(--gold), var(--g2)); }
+    .tr-sum-h { margin: 6px 0 20px; font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.4rem; color: var(--ink); }
+    .tr-sum-row { display: inline-flex; flex-direction: column; align-items: center; margin: 0 20px 12px; }
+    .tr-sum-row b { font-size: 2rem; font-weight: 800; font-family: 'Manrope', sans-serif; line-height: 1.1; background: linear-gradient(135deg, var(--g1), var(--g2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
+    .tr-sum-row span { font-size: .7rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; font-weight: 800; }
+    .tr-sum-weak { margin: 10px 0 22px; color: var(--warn); font-weight: 700; font-size: .92rem; }
+    .tr-sum-weak.tr-sum-good { color: var(--ok-ink); }
 
-    /* бейджи прогресса на чипах */
-    .tr-badge { display: inline-flex; margin-left: 7px; color: var(--ok); vertical-align: middle; }
-    .tr-badge .ic { width: 14px; height: 14px; }
-    .tr-chip.on .tr-badge { color: #fff; }
-    .tr-badge-n { margin-left: 7px; font-size: .7rem; font-weight: 800; color: var(--ink-faint); background: rgba(99,102,241,.12); border-radius: 99px; padding: 1px 7px; }
-    .tr-chip.on .tr-badge-n { color: #fff; background: rgba(255,255,255,.24); }
+    .tr-note { text-align: center; color: var(--ink-faint); font-size: .78rem; line-height: 1.55; padding: 0 10px; }
 
-    /* ── общий прогресс (лёгкая геймификация) ── */
-    .tr-overall { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-ink); font-size: .82rem; font-weight: 700; margin: 0 0 14px; padding: 6px 13px; border-radius: 99px; background: rgba(99,102,241,.08); }
-    .tr-overall:empty { display: none; }
-
-    /* ── модалка ── */
+    /* ── модалка (аналитика / авторинг) ── */
     .tr-modal { position: fixed; inset: 0; z-index: 50; background: rgba(20,22,45,.55); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; animation: trFade .2s ease; }
-    @keyframes trFade { from { opacity: 0; } to { opacity: 1; } }
     .tr-modal-card { background: #fff; border-radius: 20px; max-width: 920px; width: 100%; max-height: 86vh; overflow: auto; box-shadow: var(--sh-lg); animation: trUp .3s var(--ease) both; }
-    .tr-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid rgba(99,102,241,.12); font-weight: 800; font-family: 'Manrope', sans-serif; font-size: 1.06rem; color: var(--ink); position: sticky; top: 0; background: #fff; z-index: 1; }
+    .tr-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line); font-weight: 800; font-family: 'Manrope', sans-serif; font-size: 1.06rem; color: var(--ink); position: sticky; top: 0; background: #fff; z-index: 1; }
     .tr-modal-x { background: none; border: none; cursor: pointer; color: var(--ink-soft); padding: 5px; border-radius: 9px; transition: .15s; }
     .tr-modal-x:hover { background: rgba(99,102,241,.1); color: var(--ink); }
     .tr-modal-x .ic { width: 18px; height: 18px; }
     #tr-an-body, #tr-tch-body { padding: 20px 22px; }
     .tr-an-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
-    .tr-an-cls { font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; padding: 8px 14px; border-radius: 99px; border: 1px solid rgba(99,102,241,.2); background: #fff; color: var(--ink-soft); transition: .15s; }
+    .tr-an-cls { font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; padding: 8px 14px; border-radius: 99px; border: 1px solid rgba(99,102,241,.2); background: #fff; color: var(--ink-soft); transition: .15s; }
     .tr-an-cls:hover, .tr-an-cls.on { border-color: var(--g1); color: var(--accent-ink); background: var(--accent-soft); }
     .tr-an-empty { color: var(--ink-faint); padding: 24px; text-align: center; }
-    .tr-hm-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid rgba(99,102,241,.12); }
+    .tr-hm-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--line); }
     table.tr-hm { border-collapse: collapse; font-size: .8rem; width: 100%; }
     table.tr-hm th, table.tr-hm td { border: 1px solid rgba(99,102,241,.1); padding: 7px 9px; text-align: center; white-space: nowrap; }
     table.tr-hm th { background: #f6f7fd; color: var(--ink-soft); font-weight: 700; position: sticky; top: 0; }
-    .tr-hm-name { text-align: left !important; font-weight: 600; color: var(--ink); background: #f6f7fd; position: sticky; left: 0; }
+    .tr-hm-name { text-align: left !important; font-weight: 700; color: var(--ink); background: #f6f7fd; position: sticky; left: 0; }
     .tr-hm-none { color: #cbd5e1; }
     .tr-hm-cell { font-weight: 700; color: #334155; }
     .tr-hm-cell .ic { width: 14px; height: 14px; color: #fff; }
@@ -249,48 +325,25 @@
     .tr-form-hint { font-size: .8rem; color: var(--ink-soft); line-height: 1.5; }
     .tr-form-err { color: #dc2626; font-size: .85rem; font-weight: 600; min-height: 18px; }
 
-    /* ── режим (умная тренировка) ── */
-    .tr-mode { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
-    .tr-mode-btn {
-      font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
-      padding: 9px 15px; border-radius: 99px; border: 1px solid rgba(99,102,241,.18); background: rgba(255,255,255,.7); color: var(--ink-soft); transition: .16s var(--ease);
+    /* ── адаптив ── */
+    @media (max-width: 1080px) {
+      .tr-grid { grid-template-columns: 1fr; }
+      .tr-rail { position: static; }
+      .tr-progress-card .tr-stat-tiles { grid-template-columns: 1fr 1fr 1fr 1fr; }
+      .tr-topics { flex-direction: row; flex-wrap: wrap; }
+      .tr-chip { width: auto; }
+      .tr-chip > .tr-grade, .tr-chip > .tr-badge { margin-left: 0; }
     }
-    .tr-mode-btn .ic { width: 16px; height: 16px; }
-    .tr-mode-btn:hover { border-color: var(--g1); color: var(--accent-ink); transform: translateY(-1px); }
-    .tr-mode-btn.on { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--g1), var(--g2)); box-shadow: 0 8px 20px rgba(99,102,241,.32); }
-    .tr-session { font-size: .82rem; font-weight: 800; color: var(--accent-ink); padding: 4px 12px; border-radius: 99px; background: rgba(99,102,241,.1); }
-    .tr-session:empty { display: none; }
-    /* конструктор — отдельный (янтарный) цвет, только админ */
-    .tr-admin-btn { color: #fff; border-color: transparent; background: linear-gradient(135deg, #f59e0b, #f97316); box-shadow: 0 8px 20px rgba(245,158,11,.32); }
-    .tr-admin-btn:hover { color: #fff; border-color: transparent; background: linear-gradient(135deg, #f59e0b, #f97316); transform: translateY(-1px); }
-
-    /* ── итог сессии ── */
-    .tr-summary {
-      position: relative; overflow: hidden; background: #fff; border: 1px solid rgba(99,102,241,.1); border-radius: var(--r-lg);
-      padding: 30px 26px; box-shadow: var(--sh); text-align: center; animation: trPop .5s var(--ease);
-    }
-    .tr-summary::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, var(--gold), var(--g2)); }
-    .tr-sum-h { margin: 6px 0 18px; font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.35rem; color: var(--ink); }
-    .tr-sum-row { display: inline-flex; flex-direction: column; align-items: center; margin: 0 18px 12px; }
-    .tr-sum-row b { font-size: 1.9rem; font-weight: 800; font-family: 'Manrope', sans-serif; line-height: 1.1; background: linear-gradient(135deg, var(--g1), var(--g2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
-    .tr-sum-row span { font-size: .72rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
-    .tr-sum-weak { margin: 10px 0 20px; color: var(--warn); font-weight: 600; font-size: .92rem; }
-    .tr-sum-weak.tr-sum-good { color: var(--ok-ink); }
-
-    /* ── статистика ── */
-    .tr-stats { display: flex; gap: 28px; justify-content: center; margin: 24px 0 4px; }
-    .tr-stat { text-align: center; }
-    .tr-stat b { display: block; font-size: 1.7rem; font-weight: 800; font-family: 'Manrope', sans-serif; line-height: 1.1; background: linear-gradient(135deg, var(--g1), var(--g2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
-    .tr-stat span { font-size: .72rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
-
-    .tr-note { margin-top: 26px; text-align: center; color: var(--ink-faint); font-size: .78rem; line-height: 1.5; }
-
-    @media (max-width: 560px) {
-      .tr-wrap { padding: 22px 14px 70px; }
-      .tr-card { padding: 26px 18px 24px; }
+    @media (max-width: 620px) {
+      .tr-wrap { padding: 16px 14px 70px; }
+      .tr-topbar2 { top: 8px; padding: 12px; }
+      .tr-h1 { font-size: 1.16rem; }
+      .tr-modes { gap: 7px; }
+      .tr-work { padding: 20px 16px 22px; }
+      .tr-stage { padding: 26px 18px 30px; }
+      .tr-progress-card .tr-stat-tiles { grid-template-columns: 1fr 1fr; }
       .tr-inrow { flex-wrap: wrap; }
       .tr-inrow .tr-btn { width: 100%; justify-content: center; }
-      .tr-stats { gap: 22px; }
     }
     @media (prefers-reduced-motion: reduce) {
       * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
@@ -302,29 +355,141 @@
   <aside class="sidebar" id="app-sidebar"></aside>
   <main class="sb-content">
     <div class="tr-wrap">
-      <div class="tr-head">
-        <h1 class="tr-h1">Тренажёр<span class="tr-pill" id="tr-subject">Алгебра · 7–8 класс</span></h1>
-        <div class="tr-sub">Задачи генерируются автоматически и проверяются мгновенно. Решай по одной — бесконечно.</div>
+      <!-- ════ верхняя панель (стекло, плавающая) ════ -->
+      <div class="tr-topbar2">
+        <div class="tr-brand">
+          <span class="tr-brand-mark"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l1.8 4.6L18.5 9l-4.7 1.4L12 15l-1.8-4.6L5.5 9l4.7-1.4z"/><path d="M19 14l.7 1.8L21.5 16.5l-1.8.7L19 19l-.7-1.8L16.5 16.5l1.8-.7z"/></svg></span>
+          <div>
+            <h1 class="tr-h1">Тренажёр</h1>
+            <div class="tr-brand-sub"><span class="tr-pill" id="tr-subject">Алгебра · 7–8 класс</span></div>
+          </div>
+        </div>
+        <div class="tr-modes">
+          <div class="tr-smart on" id="tr-smart-btn" role="switch" aria-checked="true" tabindex="0">
+            <span class="tr-smart-txt">
+              <svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l1.8 4.6L18.5 9l-4.7 1.4L12 15l-1.8-4.6L5.5 9l4.7-1.4z"/><path d="M19 14l.7 1.8L21.5 16.5l-1.8.7L19 19l-.7-1.8L16.5 16.5l1.8-.7z"/></svg>
+              Умная тренировка
+            </span>
+            <span class="tr-switch"></span>
+          </div>
+          <span class="tr-session" id="tr-session"></span>
+          <button class="tr-mode-btn" id="tr-analytics-btn" type="button" style="display:none">
+            <svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><rect x="7" y="10" width="3" height="7"/><rect x="13" y="6" width="3" height="11"/></svg>
+            Аналитика класса
+          </button>
+          <button class="tr-mode-btn tr-admin-btn" id="tr-builder-btn" type="button" style="display:none">
+            <svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 4V2M15 16v-2M8 9h2M20 9h2M17.8 11.8 19 13M15 9h.01M17.8 6.2 19 5M3 21l9-9M12.2 6.2 11 5"/></svg>
+            Конструктор
+          </button>
+        </div>
       </div>
 
-      <div class="tr-overall" id="tr-overall"></div>
+      <!-- ════ двухпанельная сетка ════ -->
+      <div class="tr-grid">
 
-      <div class="tr-mode">
-        <button class="tr-mode-btn on" id="tr-smart-btn" type="button">
-          <svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l1.8 4.6L18.5 9l-4.7 1.4L12 15l-1.8-4.6L5.5 9l4.7-1.4z"/><path d="M19 14l.7 1.8L21.5 16.5l-1.8.7L19 19l-.7-1.8L16.5 16.5l1.8-.7z"/></svg>
-          Умная тренировка
-        </button>
-        <span class="tr-session" id="tr-session"></span>
-        <button class="tr-mode-btn" id="tr-analytics-btn" type="button" style="display:none;margin-left:auto">
-          <svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><rect x="7" y="10" width="3" height="7"/><rect x="13" y="6" width="3" height="11"/></svg>
-          Аналитика класса
-        </button>
-        <button class="tr-mode-btn tr-admin-btn" id="tr-builder-btn" type="button" style="display:none">
-          <svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 4V2M15 16v-2M8 9h2M20 9h2M17.8 11.8 19 13M15 9h.01M17.8 6.2 19 5M3 21l9-9M12.2 6.2 11 5"/></svg>
-          Конструктор
-        </button>
+        <!-- ── ЛЕВЫЙ РЕЙЛ ── -->
+        <aside class="tr-rail">
+          <div class="tr-panel tr-progress-card">
+            <div class="tr-ring-row">
+              <div class="tr-ring">
+                <svg width="92" height="92" viewBox="0 0 120 120">
+                  <circle cx="60" cy="60" r="54" fill="none" stroke="rgba(99,102,241,.14)" stroke-width="11"/>
+                  <circle id="tr-ring-arc" cx="60" cy="60" r="54" fill="none" stroke="url(#trrg)" stroke-width="11" stroke-linecap="round" stroke-dasharray="339.292" stroke-dashoffset="339.292" transform="rotate(-90 60 60)"/>
+                  <defs><linearGradient id="trrg" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#6366f1"/><stop offset="1" stop-color="#8b5cf6"/></linearGradient></defs>
+                </svg>
+                <div class="tr-ring-core"><b><span id="tr-ring-num">0</span><span class="tr-ring-den" id="tr-ring-den"></span></b><span>навыков</span></div>
+              </div>
+              <div class="tr-progress-meta">
+                <b>Мастерство</b>
+                <span>Осваивай навыки — кольцо растёт с каждой освоенной темой.</span>
+                <div class="tr-overall" id="tr-overall"></div>
+              </div>
+            </div>
+            <div class="tr-stat-tiles">
+              <div class="tr-tile"><b id="tr-solved">0</b><span>решено</span></div>
+              <div class="tr-tile gold"><b id="tr-streak">0</b><span>серия</span></div>
+            </div>
+          </div>
+
+          <div class="tr-panel tr-rail-sec" id="tr-subjects-sec">
+            <div class="tr-rail-hd"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7h18M3 12h18M3 17h18"/></svg>Предмет</div>
+            <div class="tr-subjects" id="tr-subjects"></div>
+          </div>
+
+          <div class="tr-panel tr-rail-sec">
+            <div class="tr-rail-hd"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20M4 4.5A2.5 2.5 0 0 1 6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5z"/></svg>Темы</div>
+            <div class="tr-topics" id="tr-topics"></div>
+          </div>
+        </aside>
+
+        <!-- ── ОСНОВНАЯ ОБЛАСТЬ ── -->
+        <section class="tr-main">
+          <div class="tr-panel tr-skillbar">
+            <div class="tr-skillpanel-hd" id="tr-skillpanel-hd">Навыки</div>
+            <div class="tr-skills" id="tr-skills"></div>
+          </div>
+
+          <div class="tr-card" id="tr-card">
+            <div class="tr-stage">
+              <div class="tr-skill" id="tr-skill"></div>
+              <div class="tr-eq" id="tr-eq">—</div>
+            </div>
+            <div class="tr-work">
+              <div class="tr-difficulty" id="tr-difficulty"></div>
+
+              <div id="tr-answerbox">
+                <div class="tr-inrow">
+                  <span class="tr-eqx" id="tr-eqx">x =</span>
+                  <input class="tr-input" id="tr-input" type="text" inputmode="text" autocomplete="off"
+                         placeholder="ответ" aria-label="Ваш ответ"/>
+                  <button class="tr-btn tr-primary" id="tr-check" type="button">Проверить</button>
+                </div>
+                <div class="tr-keypad" id="tr-keypad"></div>
+                <div class="tr-preview" id="tr-preview"></div>
+                <div class="tr-feedback" id="tr-feedback"></div>
+              </div>
+
+              <div id="tr-stepbox" style="display:none">
+                <div class="tr-steps" id="tr-steps"></div>
+                <div class="tr-inrow">
+                  <input class="tr-input" id="tr-stepin" type="text" autocomplete="off"
+                         placeholder="следующий шаг, напр. 3x = 15" aria-label="Следующий шаг"/>
+                  <button class="tr-btn tr-primary" id="tr-stepcheck" type="button">Шаг</button>
+                </div>
+                <div class="tr-keypad" id="tr-keypad2"></div>
+                <div class="tr-preview" id="tr-prev2"></div>
+                <div class="tr-feedback" id="tr-stepfb"></div>
+              </div>
+
+              <div class="tr-actions">
+                <button class="tr-btn tr-ghost" id="tr-step-toggle" type="button" style="display:none">
+                  <svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg>
+                  Решить по шагам
+                </button>
+                <button class="tr-btn tr-ghost" id="tr-hint" type="button">
+                  <svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.3 1 2.1h6c0-.8.4-1.6 1-2.1A7 7 0 0 0 12 2Z"/></svg>
+                  Подсказка
+                </button>
+                <button class="tr-btn tr-ghost" id="tr-solve" type="button">
+                  <svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2zM22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
+                  Решение
+                </button>
+                <button class="tr-btn tr-ghost" id="tr-skip" type="button">
+                  <svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 4 12 8-12 8z"/><path d="M20 4v16"/></svg>
+                  Другая
+                </button>
+              </div>
+
+              <div class="tr-solution" id="tr-solution" style="display:none"></div>
+            </div>
+          </div>
+
+          <div class="tr-summary" id="tr-summary" style="display:none"></div>
+          <div class="tr-note" id="tr-note"></div>
+        </section>
       </div>
 
+      <!-- модалки (position:fixed — местоположение в потоке не важно) -->
       <div class="tr-modal" id="tr-analytics" style="display:none">
         <div class="tr-modal-card">
           <div class="tr-modal-head">
@@ -348,81 +513,6 @@
           <div id="tr-tch-body"></div>
         </div>
       </div>
-
-      <div class="tr-subjects" id="tr-subjects"></div>
-      <div class="tr-topbar">
-        <span class="tr-nav-eyebrow">Тема</span>
-        <div class="tr-topics" id="tr-topics"></div>
-      </div>
-      <div class="tr-skillpanel">
-        <div class="tr-skillpanel-hd" id="tr-skillpanel-hd">Навыки</div>
-        <div class="tr-skills" id="tr-skills"></div>
-      </div>
-
-      <div class="tr-card">
-        <div class="tr-stage">
-          <div class="tr-skill" id="tr-skill"></div>
-          <div class="tr-eq" id="tr-eq">—</div>
-        </div>
-        <div class="tr-work">
-
-        <div class="tr-difficulty" id="tr-difficulty"></div>
-
-        <div id="tr-answerbox">
-          <div class="tr-inrow">
-            <span class="tr-eqx" id="tr-eqx">x =</span>
-            <input class="tr-input" id="tr-input" type="text" inputmode="text" autocomplete="off"
-                   placeholder="ответ" aria-label="Ваш ответ"/>
-            <button class="tr-btn tr-primary" id="tr-check" type="button">Проверить</button>
-          </div>
-          <div class="tr-keypad" id="tr-keypad"></div>
-          <div class="tr-preview" id="tr-preview"></div>
-          <div class="tr-feedback" id="tr-feedback"></div>
-        </div>
-
-        <div id="tr-stepbox" style="display:none">
-          <div class="tr-steps" id="tr-steps"></div>
-          <div class="tr-inrow">
-            <input class="tr-input" id="tr-stepin" type="text" autocomplete="off"
-                   placeholder="следующий шаг, напр. 3x = 15" aria-label="Следующий шаг"/>
-            <button class="tr-btn tr-primary" id="tr-stepcheck" type="button">Шаг</button>
-          </div>
-          <div class="tr-keypad" id="tr-keypad2"></div>
-          <div class="tr-preview" id="tr-prev2"></div>
-          <div class="tr-feedback" id="tr-stepfb"></div>
-        </div>
-
-        <div class="tr-actions">
-          <button class="tr-btn tr-ghost" id="tr-step-toggle" type="button" style="display:none">
-            <svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg>
-            Решить по шагам
-          </button>
-          <button class="tr-btn tr-ghost" id="tr-hint" type="button">
-            <svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.3 1 2.1h6c0-.8.4-1.6 1-2.1A7 7 0 0 0 12 2Z"/></svg>
-            Подсказка
-          </button>
-          <button class="tr-btn tr-ghost" id="tr-solve" type="button">
-            <svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2zM22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
-            Решение
-          </button>
-          <button class="tr-btn tr-ghost" id="tr-skip" type="button">
-            <svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 4 12 8-12 8z"/><path d="M20 4v16"/></svg>
-            Другая
-          </button>
-        </div>
-
-        <div class="tr-solution" id="tr-solution" style="display:none"></div>
-        </div>
-      </div>
-
-      <div class="tr-summary" id="tr-summary" style="display:none"></div>
-
-      <div class="tr-stats">
-        <div class="tr-stat"><b id="tr-solved">0</b><span>решено</span></div>
-        <div class="tr-stat"><b id="tr-streak">0</b><span>серия</span></div>
-      </div>
-
-      <div class="tr-note" id="tr-note"></div>
     </div>
   </main>
 </div>
@@ -943,6 +1033,11 @@
       solvedTotal += (p.solved || 0);
       if (p.mastered) mastered++;
     }
+    // премиум: кольцо мастерства в рейле (отражает уже посчитанные mastered/total)
+    var _total = gens.length || 1, _arc = $('tr-ring-arc');
+    if (_arc) { var _C = 339.292, _f = Math.max(0, Math.min(1, mastered / _total)); _arc.style.strokeDashoffset = (_C * (1 - _f)).toFixed(1); }
+    var _rn = $('tr-ring-num'); if (_rn) _rn.textContent = mastered;
+    var _rd = $('tr-ring-den'); if (_rd) _rd.textContent = '/' + _total;
     var el = $('tr-overall');
     if (el) el.textContent = solvedTotal ? ('Освоено навыков: ' + mastered + ' из ' + gens.length + '  ·  решено всего: ' + solvedTotal) : '';
   }