fix(algebra-8 ch2): сломанная вёрстка слайдеров, прокачаны подсказки и шпаргалка

- Слайдеры (.sliders label): убран flex-direction:column, который раскладывал
  KaTeX-span / '=' / <b> / <input> на 4 строки. Теперь label = block,
  всё на одной строке, slider — на следующей.
- .wg-help: вместо мелкого курсива — полноценный hint-box с жёлтым
  градиентом, левой полосой и круглым «?» слева. Совпадает по визуалу
  с главой 1.
- Шпаргалка: добавлена кнопка «Шпаргалка» в шапке, на узких экранах
  (≤980px) col-side превращается в выезжающий справа drawer с
  backdrop'ом, открывается по кнопке/закрывается по клику вне или Esc.
- initSidebarToggle() вызывается из init().

frontend/textbooks/algebra_8_ch2.html

@@ -139,7 +139,9 @@ input,select,textarea{font-family:inherit}
 .wg-header{display:flex;align-items:center;gap:8px;margin-bottom:14px}
 .wg-badge{padding:4px 9px;background:var(--sec-acc,var(--pri));color:#fff;border-radius:6px;font-family:'Unbounded',sans-serif;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
 .wg-title{font-family:'Unbounded',sans-serif;font-size:1.05rem;font-weight:800;color:var(--sec-acc-d,var(--pri2));flex:1}
-.wg-help{font-size:.78rem;color:var(--muted);font-style:italic;margin-bottom:10px;line-height:1.5}
+.wg-help{font-size:.88rem;color:var(--text);margin-bottom:12px;line-height:1.55;background:linear-gradient(135deg,var(--warn-bg,#fef3c7),var(--sec-acc-soft,var(--pri-soft)));border-left:4px solid var(--warn,#f59e0b);padding:9px 14px;border-radius:9px;position:relative}
+.wg-help::before{content:'?';position:absolute;left:-13px;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;background:var(--warn,#f59e0b);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.78rem;box-shadow:0 2px 6px rgba(0,0,0,.18)}
+.dark .wg-help{background:linear-gradient(135deg,rgba(245,158,11,.18),rgba(233,30,99,.10))}
 
 .btn{padding:8px 16px;border-radius:8px;background:var(--card);color:var(--text);border:1.5px solid var(--border);font-weight:600;font-size:.88rem;transition:background .15s,border-color .15s,transform .1s}
 .btn:hover{background:var(--sec-acc-soft,var(--pri-soft));border-color:var(--sec-acc,var(--pri))}
@@ -250,9 +252,10 @@ input,select,textarea{font-family:inherit}
 
 /* SLIDERS / DROP / ACTIONS */
 .sliders{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-bottom:10px}
-.sliders label{display:flex;flex-direction:column;gap:4px;font-size:.85rem;color:var(--muted);background:var(--card);padding:8px 10px;border-radius:8px;border:1px solid var(--border)}
-.sliders label b{font-family:'JetBrains Mono',monospace;font-size:1.05rem;color:var(--sec-acc-d,var(--pri2))}
-.sliders input[type="range"]{width:100%;accent-color:var(--sec-acc,var(--pri))}
+.sliders label{display:block;font-size:.92rem;color:var(--muted);background:var(--card);padding:8px 12px;border-radius:8px;border:1px solid var(--border);line-height:1.5}
+.sliders label .katex{font-size:1em}
+.sliders label b{font-family:'JetBrains Mono',monospace;font-size:1.05rem;color:var(--sec-acc-d,var(--pri2));margin-left:4px}
+.sliders label input[type="range"]{display:block;width:100%;margin-top:6px;accent-color:var(--sec-acc,var(--pri))}
 .drop-box{background:var(--card);border:1.5px dashed var(--border);border-radius:10px;padding:10px;min-height:90px;transition:border-color .15s,background .15s}
 .drop-box:hover{border-color:var(--sec-acc,var(--pri));background:var(--sec-acc-soft,var(--pri-soft))}
 .drop-box h5{font-family:'Unbounded',sans-serif;font-size:.78rem;color:var(--sec-acc-d,var(--pri2));margin-bottom:8px;text-transform:uppercase;letter-spacing:.05em}
@@ -262,6 +265,14 @@ input,select,textarea{font-family:inherit}
 .actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
 .eq-show{font-family:'JetBrains Mono',monospace}
 .pipe-tabs .btn.active{background:var(--sec-acc,var(--pri));color:#fff;border-color:var(--sec-acc,var(--pri))}
+
+/* SIDEBAR DRAWER for narrow viewports */
+.col-side-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:9990;display:none;animation:fadeIn .18s ease}
+.col-side-backdrop.show{display:block}
+@media(max-width:980px){
+  .col-side{position:fixed;top:0;right:0;height:100vh;width:300px;max-width:88vw;background:var(--bg);box-shadow:-12px 0 24px rgba(0,0,0,.18);padding:18px 16px;overflow-y:auto;transform:translateX(100%);transition:transform .25s ease;z-index:9991;max-height:none}
+  .col-side.open{transform:none}
+}
 </style>
 </head>
 <body>
@@ -277,6 +288,10 @@ input,select,textarea{font-family:inherit}
         <svg class="ic" viewBox="0 0 24 24"><polyline points="15 18 9 12 15 6"/></svg>
         Глава 1
       </a>
+      <button id="sidebar-btn" class="hdr-btn" title="Шпаргалка">
+        <svg class="ic" viewBox="0 0 24 24"><line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="14" y2="18"/></svg>
+        Шпаргалка
+      </button>
       <button id="theme-btn" class="hdr-btn" title="Сменить тему">
         <svg class="ic" viewBox="0 0 24 24"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>
         <span id="theme-lab">Тёмная</span>
@@ -346,7 +361,8 @@ input,select,textarea{font-family:inherit}
 
   </div>
 
-  <aside class="col-side"><div id="sidebar-content"></div></aside>
+  <aside class="col-side" id="col-side"><div id="sidebar-content"></div></aside>
+  <div class="col-side-backdrop" id="col-side-backdrop"></div>
 </main>
 
 <footer class="foot">Интерактивный учебник «Алгебра 8» · Глава 2 · LearnSpace · версия 1.0</footer>
@@ -697,9 +713,24 @@ function confetti(){
 }
 
 /* INIT */
+function initSidebarToggle(){
+  const side = document.getElementById('col-side');
+  const back = document.getElementById('col-side-backdrop');
+  const btn = document.getElementById('sidebar-btn');
+  if(!side || !btn) return;
+  function open(){ side.classList.add('open'); back.classList.add('show'); }
+  function close(){ side.classList.remove('open'); back.classList.remove('show'); }
+  btn.addEventListener('click', ()=>{
+    if(side.classList.contains('open')) close();
+    else open();
+  });
+  back.addEventListener('click', close);
+  document.addEventListener('keydown', e=>{ if(e.key === 'Escape') close(); });
+}
 function init(){
   loadProgress();
   initTheme();
+  initSidebarToggle();
   buildParaSelector();
   refreshProgressUI();
   goTo('p7');