/* Layout: Sidebar – colour. The sidebar takes the main colour; the open page is a light card. */
.topbar { background: var(--brand); }
.mainnav a, .mainnav .linkish, .mainnav .nav-grp-btn { color: rgba(255,255,255,.9); }
.mainnav a:hover, .mainnav .nav-grp-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.mainnav a.active, .nav-grp.on > .nav-grp-btn { background: var(--card); color: var(--brand); font-weight: 600; }
.mainnav a.nav-soon, .mainnav a.nav-lock { color: rgba(255,255,255,.55); }
.nav-av { background: var(--hl); color: var(--hl-ink); }
.lang-btn { background: rgba(255,255,255,.16); color: #fff; }
.top-bell { color: #fff; }

@media (min-width: 1000px) {
  body { padding-left: 248px; }
  .topbar { position: fixed; top: 0; left: 0; bottom: 0; width: 248px; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; padding: 22px 14px; gap: 14px; overflow-y: auto; border: 0; box-shadow: none; }
  .brand { font-size: 1.05rem; padding: 0 8px 14px; }
  .brand .long { display: inline; } .brand .short { display: none; }
  .lang-btn { margin-left: 0; align-self: flex-start; }
  .top-bell { align-self: flex-start; margin-left: 8px; }
  .topbar:has(> .top-bell) > .mainnav { flex-basis: auto; }
  .mainnav { flex-direction: column; align-items: stretch; gap: 2px; flex: 0 0 auto !important; }
  .mainnav a, .mainnav .linkish { padding: 9px 14px; border-radius: 10px; font-size: .97rem; }
  .mainnav a.nav-account { margin: 10px 0 0 !important; }
  .mainnav .logout { margin-top: 10px; padding: 0 14px; }
  .wrap { max-width: 1080px; padding: 0 28px; }
  main.wrap { padding-top: 26px; }
  .menu-btn { display: none; }
}
@media (min-width: 1000px) { .brand { border-bottom: 1px solid rgba(255,255,255,.2); } }