.back-to-top {
  position: fixed;
  z-index: 25;
  right: max(22px, env(safe-area-inset-right));
  bottom: max(76px, calc(env(safe-area-inset-bottom) + 68px));
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, .36);
  border-radius: 24px;
  background: rgba(40, 53, 44, .94);
  color: #fff;
  box-shadow: 0 5px 18px rgba(27, 37, 29, .2);
  font: inherit;
  font-size: 12px;
  letter-spacing: .04em;
  transition: transform .2s, background .2s, opacity .2s;
}
.back-to-top:hover { transform: translateY(-2px); background: #394a3c; }
.back-to-top-arrow { font-size: 19px; line-height: 1; }
.back-to-top[hidden] { display: none; }
@media (max-width: 700px) {
  .back-to-top { right: 16px; bottom: max(72px, calc(env(safe-area-inset-bottom) + 64px)); min-height: 42px; padding: 0 14px; }
}