UI: кнопка «Меню» (гамбургер) в нижней панели → боковое меню справа (плашка аккаунта + Выйти)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/styles/layout.css

@@ -194,3 +194,64 @@
   font-size: 13px;
 }
 .place-badge.first { background: var(--gold); color: #1a1a1a; border-color: var(--gold); }
+
+/* ─── Боковое меню (выезжает справа) ─────────────────────────────────────────── */
+.drawer-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+  z-index: 60;
+}
+.drawer-overlay.open { opacity: 1; pointer-events: auto; }
+
+.side-menu {
+  position: fixed;
+  top: 0;
+  right: 0;
+  height: 100%;
+  width: min(300px, 84vw);
+  background: var(--surface);
+  border-left: 1px solid var(--border);
+  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
+  transform: translateX(100%);
+  transition: transform 0.22s ease;
+  z-index: 61;
+  display: flex;
+  flex-direction: column;
+  padding-top: var(--safe-top);
+}
+.side-menu.open { transform: translateX(0); }
+
+.side-account {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  text-align: left;
+  padding: 16px;
+  background: none;
+  border: none;
+  border-bottom: 1px solid var(--border);
+  color: var(--text);
+}
+.side-account-info { display: flex; flex-direction: column; min-width: 0; }
+.side-account-info b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; }
+
+.side-menu-items { display: flex; flex-direction: column; padding: 8px; }
+.side-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  text-align: left;
+  padding: 12px 14px;
+  background: none;
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--text);
+  font-weight: 600;
+}
+.side-menu-item.danger { color: var(--danger); }