/* Move Top X - Styles */
:root{
  --mtx-bg: #1b1b1c;
  --mtx-border: #2a2a2b;
  --mtx-fg: #e8e8e8;
}

#mtx-backToTop{
  position: fixed;
  left: 18px; /* JS updates this to follow the mouse X */
  bottom: 18px; /* Always sticks to the bottom */
  width: 48px;
  height: 48px;
  border-radius: 24px;
  border: 1px solid var(--mtx-border);
  background: var(--mtx-bg);
  color: var(--mtx-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  opacity: 0;          /* Hidden until scrolled down */
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease, background .2s ease, color .2s ease, border-color .2s ease;
  z-index: 1000;
  user-select: none;
}
#mtx-backToTop.mtx-no-shadow{ box-shadow: none; }
#mtx-backToTop:hover{ background: var(--mtx-hover-bg, #2a2a2b); border-color: var(--mtx-hover-border, #3a3a3b); }
#mtx-backToTop.mtx-show{ opacity: 1; visibility: visible; transform: translateY(0); }

/* Snap-to-right mode: rely on inline/JS for right offset */
#mtx-backToTop.mtx-right{
  left: auto; /* disable left when snapping right; right is set inline/JS */
}