.menupanel-overlay {
  position: fixed;
  inset: 0;
  z-index: 1001;
  transition: background 0.2s ease-out;
}

.menupanel-overlay-visible {
  pointer-events: auto;
}

.menupanel-overlay-hidden {
  pointer-events: none;
}

/* Panel po prawej – wspólne rzeczy */
.menupanel {
  position: fixed;
  overflow-y: auto;
  top: 64px;
  right: 0;
  width: 360px;
  padding: 4px 8px;
  height: calc(100vh - 64px);
  background-color: #232323E0;
  backdrop-filter: blur(16px) saturate(250%);
}

/* OTWARCIE – 0.267s, KeySpline="0.1,0.9 0.4,1.0" */
.menupanel-open {
  visibility: visible;
  transform: translateX(0);
  transition: transform 0.267s cubic-bezier(0.1, 0.9, 0.4, 1.0);
}

/* ZAMKNIĘCIE – 0.2s, KeySpline="0.2,0.0 0.9,0.0" */
.menupanel-closed {
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.2s cubic-bezier(0.2, 0.0, 0.9, 0.0), visibility 0s linear 0.2s;
}

#menupanel-menu .fluent-nav-icon {
  width: 16px !important;
  height: 16px !important;
  fill: #ffffff !important;
  margin: 0 -4px 0 4px;
}

#menupanel-menu .fluent-nav-link > div > div > span.fluent-nav-icon {
  display: none;
}

#menupanel-menu .fluent-nav-group > div > div > div > div.fluent-nav-text {
  margin-inline-start: calc(var(--design-unit) * 2px - 2px);
}

#menupanel-menu .fluent-nav-item > div > .fluent-nav-menu > div > div > div > div > span.fluent-nav-icon {
  display: none;
}

#menupanel-menu .fluent-nav-link > div > div > div > a > div > div > span.fluent-nav-icon {
  display: none;
}

#menupanel-menu .fluent-nav-group > div > div > div > a > div > div > span.fluent-nav-text {
  margin-inline-start: calc(var(--design-unit) * 2px - 2px);
}

@media (max-width: 600px) {
  .menupanel {
    width: 100%;
  }
}