/* Боковое меню — как у Solar Wings на скрине Артёма 17.09.2026 (решение 174).
   Тёмная панель во всю высоту слева, сверху логотип, разделы по группам с подписью
   капсом, у пункта контурная иконка; активный пункт — янтарный текст на янтарной
   подложке и полоска по правому краю. Панель тёмная в обеих темах, как в образце:
   там светлая страница и чёрное меню. Цвета сняты со скрина. */
:root {
  --sb-width: 240px;
  --sb-bg: #141414;
  --sb-border: #1e1e1e;
  --sb-text: #cfcfcf;
  --sb-muted: #a39e98;
  --sb-soon: #767676;
  --sb-accent: #e6a64c;
  --sb-accent-bg: rgba(230, 166, 76, .12);
  --sb-hover-bg: rgba(255, 255, 255, .04);
}

.app { display: grid; grid-template-columns: var(--sb-width) minmax(0, 1fr); min-height: 100vh; }
.app-main { min-width: 0; display: flex; flex-direction: column; }
.app-main > .page { padding: 24px 28px 48px; }

.sb {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 150;
  display: flex; flex-direction: column;
  background: var(--sb-bg); border-right: 1px solid var(--sb-border);
  scrollbar-width: thin; scrollbar-color: #2a2a2a transparent;
}

/* Логотип — на высоте шапки страницы. */
.sb-brand {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
  height: 65px; padding: 0 20px; color: #f5f5f5;
}
.sb-brand:hover { opacity: 1; }
.sb-logo {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: inline-grid; place-items: center;
  font-family: var(--font-brand); font-size: 15px; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
}
.sb-brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.sb-name { font-size: 14.5px; font-weight: 700; color: #f5f5f5; white-space: nowrap; }
.sb-sub {
  font-size: 9.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--sb-accent); white-space: nowrap;
}

.sb-nav { flex: 1; padding: 0 0 20px; }
/* Отступы сняты со скрина: от подписи до первого пункта ~36 px, от пункта до пункта
   42 px, от последнего пункта группы до следующей подписи ~60 px. */
.sb-group {
  padding: 33px 20px 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sb-muted); white-space: nowrap;
}
.sb-group:first-child { padding-top: 16px; }

.sb-link {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  min-height: 42px; padding: 0 20px;
  color: var(--sb-text); font-size: 14px; font-weight: 400; white-space: nowrap;
  transition: background .15s, color .15s;
}
.sb-link svg {
  width: 19px; height: 19px; flex-shrink: 0;
  stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.sb-link:hover { background: var(--sb-hover-bg); color: #fff; opacity: 1; }
.sb-link.active { background: var(--sb-accent-bg); color: var(--sb-accent); }
.sb-link.active::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 3px; background: var(--sb-accent);
}
/* Раздел ещё строится — серее остальных, но открывается (страница «скоро»). */
.sb-link.soon { color: var(--sb-soon); }
.sb-link.soon:hover { color: var(--sb-text); }

/* Кнопка «≡» в шапке страницы: сворачивает меню до иконок, на телефоне — открывает. */
.menu-btn {
  width: 36px; height: 36px; flex-shrink: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 10px; color: var(--text3);
  transition: color .2s, background .2s;
}
.menu-btn:hover { color: var(--text); background: var(--card2); }
.menu-btn svg {
  width: 20px; height: 20px; stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.sb-backdrop { display: none; }

/* Свёрнутое меню: только иконки, подписи групп — тонкой чертой. */
body.sb-mini .app { grid-template-columns: 68px minmax(0, 1fr); }
body.sb-mini .sb-brand { padding: 0; justify-content: center; }
body.sb-mini .sb-brand-text,
body.sb-mini .sb-text { display: none; }
body.sb-mini .sb-group {
  font-size: 0; padding: 14px 0 6px; margin: 0 18px; border-bottom: 1px solid #262626;
}
body.sb-mini .sb-link { justify-content: center; padding: 0; }

/* Телефон и узкое окно: меню выезжает поверх страницы по «≡». */
@media (max-width: 900px) {
  .app, body.sb-mini .app { grid-template-columns: minmax(0, 1fr); }
  .sb {
    position: fixed; left: 0; top: 0; bottom: 0; width: 260px; height: auto;
    transform: translateX(-100%); transition: transform .2s ease; z-index: 300;
  }
  body.sb-open .sb { transform: none; }
  body.sb-open .sb-backdrop {
    display: block; position: fixed; inset: 0; z-index: 250; background: rgba(0, 0, 0, .45);
  }
  body.sb-mini .sb-brand { padding: 0 20px; justify-content: flex-start; }
  body.sb-mini .sb-brand-text { display: flex; }
  body.sb-mini .sb-text { display: inline; }
  body.sb-mini .sb-group { font-size: 10.5px; padding: 33px 20px 5px; margin: 0; border: 0; }
  body.sb-mini .sb-group:first-child { padding-top: 16px; }
  body.sb-mini .sb-link { justify-content: flex-start; padding: 0 20px; }
  .app-main > .page { padding: 16px 16px 40px; }
}