style(trainer): структурировал область выбора темы и навыков

- подпись «Тема» над вкладками тем; бейдж класса (7/8) на каждой теме — видна ступень программы
- навыки вынесены в отдельную подписанную панель «Навыки темы «…»» (для текстовых/авторских — свой заголовок) → ясная иерархия тема → навыки
- лёгкая тонировка панели отделяет навыки от тем; анимация появления на контейнерах
- смоук страницы 33/33; эмодзи/eval 0

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/trainer.html

@@ -39,9 +39,9 @@
     }
     .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-topics, .tr-skills, .tr-card { animation: trUp .5s var(--ease) both; }
+    .tr-head, .tr-overall, .tr-mode, .tr-topbar, .tr-skillpanel, .tr-card { animation: trUp .5s var(--ease) both; }
     .tr-overall { animation-delay: .04s; } .tr-mode { animation-delay: .06s; }
-    .tr-topics { animation-delay: .1s; } .tr-skills { animation-delay: .13s; } .tr-card { animation-delay: .16s; }
+    .tr-topbar { animation-delay: .1s; } .tr-skillpanel { animation-delay: .13s; } .tr-card { animation-delay: .16s; }
 
     .tr-head { margin-bottom: 20px; }
     .tr-h1 {
@@ -56,7 +56,15 @@
     }
 
     /* ── выбор темы (вкладки) ── */
-    .tr-topics { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 12px; }
+    .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);
@@ -172,8 +180,8 @@
     /* текстовый 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-skills { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 24px; }
+    /* выбор навыка внутри темы (внутри панели) */
+    .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);
@@ -327,8 +335,14 @@
         </div>
       </div>
 
-      <div class="tr-topics" id="tr-topics"></div>
-      <div class="tr-skills" id="tr-skills"></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">
@@ -550,10 +564,19 @@
   function renderTopics() {
     $('tr-topics').innerHTML = topics.map(function (t, i) {
       var done = topicMastered(t.key) ? '<span class="tr-badge" title="Тема освоена">' + ICON.star + '</span>' : '';
-      return '<button class="tr-chip' + (t.key === curTopic ? ' on' : '') + '" type="button" data-ti="' + i + '">' + esc(t.label) + done + '</button>';
+      var gr = t.grade ? '<span class="tr-grade" title="' + t.grade + ' класс">' + t.grade + '</span>' : '';
+      return '<button class="tr-chip' + (t.key === curTopic ? ' on' : '') + '" type="button" data-ti="' + i + '">' + esc(t.label) + gr + done + '</button>';
     }).join('');
   }
+  function skillPanelHeader() {
+    var hd = $('tr-skillpanel-hd'); if (!hd) return;
+    var t = topics.filter(function (x) { return x.key === curTopic; })[0];
+    hd.textContent = (curTopic === 'word') ? 'Банк текстовых задач'
+      : (curTopic === 'custom') ? (isAdmin ? 'Мои генераторы' : 'Авторские задачи')
+      : ('Навыки темы «' + (t ? t.label : '') + '»');
+  }
   function renderSkills() {
+    skillPanelHeader();
     if (isWord()) {
       var tb = isTeacher
         ? '<button class="tr-skill" id="tr-gen-btn" type="button">+ ИИ-задача</button>'