:root{
  --header-h: 68px;          /* abbastanza alto per contenere il + */
  --icon: 85px;
  --panel-w: 115px;
  --hair: rgba(255,255,255,.14);
}

/* header */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: calc(var(--header-h) + env(safe-area-inset-top));
  padding-top: calc(16px + env(safe-area-inset-top));
  padding-right: 22px;

  display: flex;
  align-items: flex-start;
  justify-content: flex-end;

  background: transparent;
  z-index: 99999;
  pointer-events: none;
  overflow: visible;
}

/* + button */
.menu-btn{
  width: 36px;
  height: 36px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.22);
  color: #fff;

  display: grid;
  place-items: center;
  cursor: pointer;

  backdrop-filter: blur(6px);
  pointer-events: auto;
  z-index: 100000;
}

.menu-plus{
  font-size: 24px;
  line-height: 1;
  opacity: .95;
  transition: transform .2s ease, opacity .2s ease;
}

.menu-btn:hover .menu-plus{
  opacity: 1;
  transform: scale(1.06);
}

/* spacing under header */
body{
  padding-top: calc(var(--header-h) + env(safe-area-inset-top));
}

/* sidebar overlay */
.sidebar[hidden]{ display: none !important; }

.sidebar{
  position: fixed;
  inset: 0;
  z-index: 90000;
}

.sidebar-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}

/* left panel */
.sidebar-panel{
  position: absolute;
  top: 0;
  left: 0;

  height: 100%;
  width: var(--panel-w);

  background: rgba(0,0,0,.95);
  border-right: 1px solid var(--hair);

  transform: translateX(-100%);
  transition: transform .25s ease;
}

.sidebar.is-open .sidebar-panel{
  transform: translateX(0);
}

/* icons centered */
.sidebar-nav{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 28px;
}

.sidebar-link{
  display: grid;
  place-items: center;
  opacity: .98;
  transition: transform .18s ease, opacity .18s ease;
}

.sidebar-link:hover{
  opacity: 1;
  transform: scale(1.05);
}

.sidebar-link img{
  width: var(--icon) !important;
  height: var(--icon) !important;
  max-width: var(--icon) !important;
  max-height: var(--icon) !important;

  object-fit: contain !important;
  display: block !important;
  filter: brightness(0) invert(1);
}


@media (max-width: 768px){
  .menu-btn{
    width: 56px !important;
    height: 56px !important;
  }

  .menu-plus{
    font-size: 38px !important;
  }
}